1、bootstrap
1.1
- 行样式：row
- 列：col-md-数字（1~12）
2、AngularJS
2.1
- <html ng-app>：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() { ... }; };
<div ng-controller="firstController">...</div>
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', }); })
页面定义路由：
<ul> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> <ng-view></ng-view>
网友评论