- web app: 纯网页
- native app： 纯原生
- hybird app： 混合应用
整个应有值需要给用户呈现一个页面，然后切换这个页面下的内容，实现整个应用
-
引入文件
<script src="../js/angular-router.js" charset="utf-8"></script>
-
对此模块进行依赖
// 获取整个AngularJS应用的时候，第二个参数数组内部应填写需要的模块 angular.module('App', ['ngRoute'])
-
编写HTML代码创建结构
ng-view<nav> <a href="#/home">首页</a> <a href="#/cart">购物车</a> <a href="#/mine">我的</a> </nav> <hr> <div ng-view></div>
-
编写JS代码创建路由规则
// 配置路由 .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/', { // 锚点为 / 时候，显示 pages/home.html 页面，下面同上 templateUrl: 'pages/home.html' }) .when('/cart', { templateUrl: 'pages/cart.html' }) .when('/mine', { templateUrl: 'pages/mine.html' }) .otherwise({ // 重定向，不点击任何按钮情况下，默认选择一个页面显示 redirectTo: '/' }); }])
-
子页面
home.html<div class="home"> <h2>首页</h2> </div>
在子页面中，不需要编写完整的结构，只需要具体内容区域即可。
因为这个页面的内容，是需要添加到首页中的，首页中包含完整结构。
ui-router和ng-router功能类似，都是做路由。但它更强大一些。
-
引入文件
<script src="../js/angular-ui-router.js" charset="utf-8"></script>
-
对模块进行依赖
// 模块依赖 angular.module('App', ['ui.router'])
-
编写HTML代码创建页面
ui-sref、ui-view<nav> <a ui-sref="home">首页</a> <a ui-sref="cart">购物车</a> <a ui-sref="mine">我的</a> </nav> <hr> <div ui-view></div>
-
编写JS代码，创建路由规则
$stateProvider、$urlRouterProvider// 配置路由 .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { // 设置默认路由，如果锚点位置什么都不添加，自动对应home页面 $urlRouterProvider.when('', 'home'); // 使用$stateProvider进行路由配置 $stateProvider .state('home', { url: '/home', templateUrl: 'pages/home.html' }) .state('cart', { url: '/cart', templateUrl: 'pages/cart.html' }) .state('mine', { url: '/mine', templateUrl: 'pages/mine.html' }) }])
-
子页面和ng-route里面编写的方式一样
在子页面显示出来以后，内部也可能会出现多个子页面，那么就需要创建二级路由
-
修改home.html文件
<div class="home"> <h2>首页</h2> <hr> <nav> <a ui-sref="home.goodlist">商品列表</a> <a ui-sref="home.customlist">客户列表</a> <a ui-sref="home.commentlist">评论列表</a> </nav> <hr> <div ui-view></div> </div>
-
编写JS代码，创建二级路由规则
// 二级路由的配置 .state('home.goodlist', { url: '/goodlist', templateUrl: 'pages/home/good-list.html' }) .state('home.customlist', { url: '/customlist', templateUrl: 'pages/home/custom-list.html' }) .state('home.commentlist', { url: '/commentlist', templateUrl: 'pages/home/comment-list.html' })
-
设置二级路由的默认项
// 设置默认路由，如果锚点位置什么都不添加，自动对应home页面 $urlRouterProvider .when('', 'home') // 一级路由默认项目 .when('/home', 'home/goodlist') // 二级路由默认项
-
子页面编写同上
// 关联外部控制器
.state('home.goodlist', {
url: '/goodlist',
templateUrl: 'pages/home/good-list.html',
controller: 'goodListCtrl'
})
// 绑定控制器
.state('detail', {
url: '/detail/:id',
templateUrl: 'pages/home/detail.html',
controller: function ($scope, $stateParams) {
console.log($stateParams.id);
}
})在项目开发中，点击当前页面商品列表中的某一项，需要把当前项目的id传递给后续的页面，然后发起网络请求，获取更详细的数据
可以通过路由传参，实现这个效果
-
添加详情页面state的路由
.state('detail', { url: '/detail:id', // 冒号后面跟参数名 templateUrl: 'pages/home/detail.html', controller: function ($scope, $stateParams) { console.log($stateParams); } })
-
路由跳转传值方式1
直接在HTML中，通过
ui-sref也可以实现页面的跳转<li ng-repeat="item in data" ui-sref="detail({ id: {{ item.id }} })"> <img ng-src="{{ item.img }}" alt=""> <p>{{ item.name }}</p> </li>
-
路由跳转传值方式2
在控制器中，注入
$state服务，进行页面的跳转并传参$scope.showDetail = function () { // 获取当前对应的数据 console.log(this.item); // 使用$state进行路由的跳转，并传递数据 $state.go('detail', { id: this.item.id }); };
-
参数的接收
$stateParams内置服务负责接收数据.state('detail', { url: '/detail/:id', templateUrl: 'pages/home/detail.html', controller: function ($scope, $stateParams) { console.log($stateParams.id); } })
-
页面的回调
history.back()<button type="button" name="button" onclick="history.back()">返回</button>
在使用AngularJS进行项目开发时，不要引入jQuery文件。如果真的需要jQuery进行处理，也请不要引入。因为AngularJS内置了jqLite，可以实现类似jQuery的功能。
jqLite和jQuery用法不是完全一致的，当然了，jqLite的功能也远远没有jQuery提供的多，但是基本满足你的需求。
<div ng-controller="Ctrl">
<h1 id="title">我是最大的标题哦</h1>
<button type="button" ng-click="click()">你点我啊</button>
</div>angular.module('App', [])
.controller('Ctrl', ['$scope', function ($scope) {
$scope.click = function () {
// 获取标签
var title = document.querySelector('#title');
// angular.element()类似jQuery中的$，但是注意，参数为标签，而不是选择器
title = angular.element(title);
// title就可以使用jqLite提供的方法了
console.log(title);
// title.css('color', 'red');
// title.css({
// color: 'red',
// backgroundColor: 'cyan'
// })
title.html('Title');
};
}])addClass() //为每个匹配的元素添加指定的样式类名
after() // 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append() //在每个匹配元素里面的末尾处插入参数内容
attr() //获取匹配的元素集合中的第一个元素的属性的值
bind() //为一个元素绑定一个事件处理程序
children() //获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone() //创建一个匹配的元素集合的深度拷贝副本
contents() //获得匹配元素集合中每个元素的子元素，包括文字和注释节点
css() //获取匹配元素集合中的第一个元素的样式属性的值
data() //在匹配元素上存储任意相关数据
detach() //从DOM中去掉所有匹配的元素
empty() //从DOM中移除集合中匹配元素的所有子节点
eq() //减少匹配元素的集合为指定的索引的哪一个元素
find() //通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
hasClass() //确定任何一个匹配元素是否有被分配给定的（样式）类
html() //获取集合中第一个匹配元素的HTML内容
next() //取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
on() //在选定的元素上绑定一个或多个事件处理函数
off() //移除一个事件处理函数
one() //为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
parent() //取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
prepend() //将参数内容插入到每个匹配元素的前面（元素内部）
prop() //获取匹配的元素集中第一个元素的属性（property）值
ready() //当DOM准备就绪时，指定一个函数来执行
remove() //将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
removeAttr() //为匹配的元素集合中的每个元素中移除一个属性（attribute）
removeClass() //移除集合中每个匹配元素上一个，多个或全部样式
removeData() //在元素上移除绑定的数据
replaceWith() //用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
text() //得到匹配元素集合中每个元素的合并文本，包括他们的后代
toggleClass() //在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
triggerHandler() //为一个事件执行附加到元素的所有处理程序
unbind() //从元素上删除一个以前附加事件处理程序
val() //获取匹配的元素集合中第一个元素的当前值
wrap() //在每个匹