AngularJS基础知识
angularJS定义和特点
1.google前端开源框架
2.MVVM(modelviewview-model)设计模式:Model将和ViewModel互动(通过$scope对象),将监听Model的变化。这些可以通过View来发送和渲染,由HTML来展示你的代码
3.方便的REST
4.数据绑定和依赖注入
5.可以操作XML一样操作HTML,AngularJS通过自己的编译器和directives来完成相关的设置
6.模板被作为DOM元素传递到Angular的编译器
7.AngularJS通过指令扩展了HTML,且通过表达式绑定数据到HTML。
构建angularJS应用
添加Angular的<script>标签到<head>标签里
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
添加ng-appdirective到<body>标签
<body ng-app="guetonline" ng-controller="MainController" >
新建目录script和app.js文件,在app.js中定义和配置所有模块和依赖
varapp=angular.module('guetonline',[ 'ngRoute', 'mobile-angular-ui', 'mobile-angular-ui.gestures' ]);
在模块app中定义控制器、服务、指令
app.controller('MainCtrl',function($rootScope,$scope,$http){})//控制器 app.service('MainSevicel',function(){})//服务 app.directive('dragToDismiss',function(){})//指令
在模块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}); });
待续。。下一步深入学习4.5两步,还有过滤器