Day08：bootstrap和angularJS认识

1、bootstrap

1.1

• 行样式：row
• 列：col-md-数字（1~12）

2、AngularJS

2.1

• ：ng-app是angularJS起效的范围
• ng-model：定义前端数据模型
• 使用{{模型名}}读取模型中的值

2.2 模块、控制器和数据绑定

• 纯页面端的MVC
• V：页面元素
• M：ng-model：module（模块）：
  angular.module('firstModule',[]); //无依赖模块 angular.module('firstModule',['moduleA','moduleB']);
• C：ng-controller：

angular.module('firstModule',[]).controller('firstController',function() { ... }; };

...

3、Scope和Event

3.1 scope：内置对象，$Scope获得，对数据模块进行处理的时候使用

$scope.greeting='hello' //定义 {{greeting}} //获取

3.2 event

• $scope.$emit('event_name_emit', 'message'); //emit冒泡事件，从子scope向上发送

• $scope.$on('event_name_emit', function(event, data) {}; //on，父scopt接受

• $scopt.$broadcast('event_name_broad', 'message'); //父scope向下发送广播

• $scopt.$on('event_name_broad', function(event, data){};//子scope接受

3.3 多视图和路由

内置 $routeProvider 对象负责页面加载和页面路由转向

angular.module('firstModule').config(function($routeProvider) { $routeProvider.when('/view1', { //定义页面的路由名称 controller: 'Controller1', //定义当前页面使用的控制器 templateUrl: 'view1.html', //定义要加载的真实页面 }).when('/view2', { controller: 'Controller2', templateUrl: 'view2.html', }); })

页面定义路由：

• view1
• view2