AngularJS basics

2020-05-07 19:13:51
OfStack

angularJS definition and features

1.google front-end open source framework

2.MVVM(model view view-model) design pattern: Model will interact with ViewModel (via the $scope object) and will listen for changes to Model. These can be sent and rendered via View, with HTML showing your code

3. Convenient REST

4. Data binding and dependency injection

5. You can operate HTML like XML1,AngularJS through its own compiler and directives to complete the relevant Settings

6. Templates are passed to the Angular compiler as DOM elements

7.AngularJS extends HTML by directive and binds data to HTML by expression.

builds angularJS and applies

Add Angular < script > Tag to < head > In the label



<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

Add ng-app directive to < body > The label



<body 

    ng-app="guetonline" 

    ng-controller="MainController"

    >

Create new directories script and app.js files to define and configure all modules and dependencies in app.js



var app = angular.module('guetonline', [

  'ngRoute',

  'mobile-angular-ui',

  'mobile-angular-ui.gestures'

]);

Define the controller, service, and instruction in the module app



app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) // The controller 

app.service( 'MainSevicel', function() {} ) // service 

app.directive( 'dragToDismiss', function() {} ) // instruction

Routes are defined in the module app



app.config(function($routeProvider) {

  $routeProvider.when('/',              {templateUrl: 'index/home', reloadOnSearch: false});

  $routeProvider.when('/scroll',        {templateUrl: 'scroll.html', reloadOnSearch: false}); 

  $routeProvider.when('/toggle',        {templateUrl: 'toggle.html', reloadOnSearch: false}); 

  $routeProvider.when('/tabs',          {templateUrl: 'tabs.html', reloadOnSearch: false}); 

  $routeProvider.when('/accordion',     {templateUrl: 'accordion.html', reloadOnSearch: false}); 

  $routeProvider.when('/overlay',       {templateUrl: 'overlay.html', reloadOnSearch: false}); 

  $routeProvider.when('/forms',         {templateUrl: 'forms.html', reloadOnSearch: false});

  $routeProvider.when('/dropdown',      {templateUrl: 'dropdown.html', reloadOnSearch: false});

  $routeProvider.when('/drag',          {templateUrl: 'drag.html', reloadOnSearch: false});

  $routeProvider.when('/carousel',      {templateUrl: 'carousel.html', reloadOnSearch: false});

  $routeProvider.when('/news/official_view',      {templateUrl: '/news/official_view', reloadOnSearch: false});

});

To be continued. The next step is 4.5 in depth, with filters