angularJS definition and features
1.google front-end open source framework
2.MVVM (model view view-model) design mode: The model will interact with the ViewModel (through the $scope object) and will listen for the changes in the Model. These can be sent and rendered through View, and HTML shows your code
3. Convenient REST
4. Data binding and dependency injection
5. You can operate HTML like XML. AngularJS can complete the relevant settings through its own compiler and directives.
6. The template is passed as a DOM element to Angular's compiler
7. AngularJS extends HTML through directives and binds data to HTML through expressions.
Build an angularJS application
Add Angular's <script> tag to the <head> tag
The code copy is as follows:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
Add ng-app directive to <body> tag
The code copy is as follows:
<body
ng-app="guetonline"
ng-controller="MainController"
>
Create a new directory script and app.js file, define and configure all modules and dependencies in app.js
The code copy is as follows:
var app = angular.module('guetonline', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
Define controllers, services, and instructions in module app
The code copy is as follows:
app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //Controller
app.service( 'MainSevicel', function() {} ) //Service
app.directive( 'dragToDismiss', function() {} ) //Instructions
Define routes in module app
The code copy is as follows:
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. . Next step is to learn more in-depth steps, and there are filters