1府树、bootstrap
1.1
- 行樣式：row
- 列：col-md-數(shù)字（1~12）
2俐末、AngularJS
2.1
- <html ng-app>：ng-app是angularJS起效的范圍
- ng-model：定義前端數(shù)據(jù)模型
- 使用
{{模型名}}讀取模型中的值
2.2 模塊、控制器和數(shù)據(jù)綁定
- 純頁面端的MVC
- V：頁面元素
- M：ng-model：module（模塊）：
angular.module('firstModule',[]); //無依賴模塊 angular.module('firstModule',['moduleA','moduleB']); - C：ng-controller：
angular.module('firstModule',[]).controller('firstController',function() { ... }; };
<div ng-controller="firstController">...</div>
3奄侠、Scope和Event
3.1 scope：內(nèi)置對(duì)象卓箫，$Scope獲得，對(duì)數(shù)據(jù)模塊進(jìn)行處理的時(shí)候使用
$scope.greeting='hello' //定義 {{greeting}} //獲取
3.2 event
$scope.$emit('event_name_emit', 'message'); //emit冒泡事件垄潮，從子scope向上發(fā)送
$scope.$on('event_name_emit', function(event, data) {}; //on烹卒，父scopt接受
$scopt.$broadcast('event_name_broad', 'message'); //父scope向下發(fā)送廣播
$scopt.$on('event_name_broad', function(event, data){};//子scope接受
3.3 多視圖和路由
內(nèi)置 $routeProvider 對(duì)象負(fù)責(zé)頁面加載和頁面路由轉(zhuǎn)向
angular.module('firstModule').config(function($routeProvider) { $routeProvider.when('/view1', { //定義頁面的路由名稱 controller: 'Controller1', //定義當(dāng)前頁面使用的控制器 templateUrl: 'view1.html', //定義要加載的真實(shí)頁面 }).when('/view2', { controller: 'Controller2', templateUrl: 'view2.html', }); })
頁面定義路由：
<ul> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <ng-view></ng-view>
