Home > Article > Web Front-end > AngularJS Basics_AngularJS
AngularJS Basics_AngularJS
- WBOYOriginal
- 2016-05-16 16:25:23983browse
angularJS definition and features
1.google front-end open source framework
2. MVVM (model view view-model) design pattern: Model will interact with ViewModel (through $scope object) and will monitor changes in Model. These can be sent and rendered via View, using HTML to display your code
3. Convenient REST
4. Data binding and dependency injection
5. You can operate HTML just like XML. AngularJS completes related settings through its own compiler and directives
6. Templates are passed to the Angular compiler as DOM elements
7.AngularJS extends HTML through directives and binds data to HTML through expressions.
Build angularJS application
Add Angular's <script> tag to the <head> tag </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="63312" class="copybut" id="copybut63312" onclick="doCopy('code63312')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code63312">
<br>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
Add ng-app directive to
tagng-controller="MainController"
>
Create new directory script and app.js files, define and configure all modules and dependencies in app.js
var app = angular.module('guetonline', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);
Define controllers, services, and instructions in the module app
app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //Controller
app.service( 'MainSevicel', function() {} ) //Service
app.directive( 'dragToDismiss', function() {} ) //Directive
Define routes in 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. . Next step is to learn more about 4.5 steps and filters