AngularJS的基本介绍 1-1 初始化模块依赖注入1-2AngularJs的特性-双向数据绑定 AngularJS实战 2-1 MVC2-2 Bookstore书店系统的实现
1.AngularJS的基本介绍
1-1 初始化模块、依赖注入
首先介绍AngularJS中常用的指令ng-app、ng-controller，在这之前要引用AngularJ.js
var app=angular.module("myapp",[]);//myapp是一个模块app.controller("HelloAngular",function($scope){//依赖注入的特性$scope.greeting={text:'hello',name:'we',action:'say'};})
如果想要显示hello，只需要在body中写：
<p>{{greeting.text}}</p>
网页端运行结果：
1-2AngularJs的特性-双向数据绑定
实现的效果图：
这是就是双向数据绑定的一个简单效果演示，都不需要写js只需要简单的html代码即可实现。
<div><input type="text" ng-model='greeting.text'/><p>{{greeting.text}},AngularJS</p></div>
2.AngularJS实战
2-1 MVC
2-2 Bookstore书店系统的实现
这个小型的的书店系统模拟了AngularJS路由的配置以及ng-grid控件的使用。动态演示效果：
AngularJs路由配置的代码：
var routerApp=angular.module('myapp',['ui.router','ngGrid','bookListModule','BookDetailModule'])// 由于整个应用都会和路由打交道，所以这里把$state和$stateParams这两个对象放到$rootScope// 这里的run方法只会在angular启动的时候运行一次routerApp.run(function($rootScope, $state, $stateParams) {$rootScope.$state = $state;$rootScope.$stateParams = $stateParams;});// 配置路由这里采用的是ui-router这个路由，而不是ng原生的路由// ng原生的路由不能支持前台视图，所以这里必须使用ui-routerrouterApp.config(function($stateProvider,$urlRouterProvider){$urlRouterProvider.otherwise("/index");$stateProvider.state('index',{url:"/index",views :{"":{templateUrl:'app/src/tpls/home.html'},"main@index":{templateUrl:'app/src/tpls/loginForm.html'}}}).state('booklist',{url:'/{bookType:[0-9]{1,4}}', views:{ //注意这里的写法，每一个页面带有多个ui-sref'':{templateUrl:"app/src/tpls/bookList.html"},'booktype@booklist':{templateUrl:'app/src/tpls/bookType.html'},'bookgrid@booklist':{templateUrl:'app/src/tpls/bookGrid.html'}}})//新增书籍.state('addbook',{url:'/addbook',templateUrl:'app/src/tpls/addBookForm.html'})//内容页.state("bookdetail",{url:'/bookdetail/:bookId', //这里在路由中传参数templateUrl:'app/src/tpls/bookDetail.html'})})
**注意要把$sate,$stateparams这两个参数注入到根作用域下。
