AngularJs之八

***今天讲一下angularJs的路由功能:

一:angularJs路由。

1.AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
2.通过 AngularJS 可以实现多视图的单页Web应用 。
3.通常我们的URL形式为 http://网址/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现 。
例如:

http://hengboit.com/#/first
http://hengboit.com/#/second
http://hengboit.com/#/third

当我们点击以上的任意一个链接时,向服务端请的地址都是一样的 。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

二:路由实例及讲解。

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
       <div ng-app="myapp">
            <ul>
                <li><a href="#/">首页</a></li>
                <li><a href="#/about">关于我们</a></li>
                <li><a href="#/news">新闻动态</a></li>
                <li><a href="#/lianxi">联系方式</a></li>
            </ul>

            <div ng-view></div>
        </div>
        <script>
            angular.module(‘myapp‘,[‘ngRoute‘])
            .config([‘$routeProvider‘, function($routeProvider){
                $routeProvider
                .when(‘/‘,{template:‘这是首页页面‘})
                .when(‘/about‘,{template:‘这是关于我们页面‘})
                .when(‘/lianxi‘,{template:‘这是联系方式页面‘})
                .otherwise({redirectTo:‘/‘});
            }]);
        </script>

注意:使用路由要记得引入路由route的js文件。

以下是这个实例的讲解:

1.载入了实现路由的 js 文件:angular-route.js。
2.包含了 ngRoute 模块作为主应用模块的依赖模块。 angular.module(‘myapp‘,[‘ngRoute‘])
3.使用 ngView 指令。<div ng-view></div>  ,该 div 内的 HTML 内容会根据路由的变化而变化。
4.配置 $routeProvider,用来定义路由规则。
 (1)config 函数用于配置路由规则
(2)$routeProvider.whenAPI来定义我们的路由规则
a.第一个参数是 URL 或者 URL 正则规则
b.第二个参数是路由配置对象。

三:路由设置对象。

路由配置对象的语法规则:

1 $routeProvider.when(url, {
2     template: string,
3     templateUrl: string,
4     controller: string,
5      function 或 array,
6     controllerAs: string,
7     redirectTo: string, function, resolve:     object<key, function>
8 }); 

参数说明:

template:在 ng-view 中插入简单内容,使用该参数
templateUrl:在 ng-view 中插入 HTML 模板文件时,使用该参数
controller: function、string或数组类型,在当前模板上执行的controller函数,生成新的scope
controllerAs:为controller指定别名
redirectTo:重定向的地址。
resolve:指定当前controller所依赖的其他模块。

四:最后写一个使用模板的实例。

 1 <div ng-app="mapp">
 2    <script  type="text/ng-template" id="view/list.html">
 3         <h3>这是列表页</h3>
 4         <ul>
 5         <li ng-repeat="id in mm"><a href="#/list/{{ id }}"> ID{{ id }}</a></li>
 6         </ul>
 7     </script>
 8       <a href=“#/list”>打开列表页</a>
 9      <div ng-view></div>
10 </div>
11 <script src="../js/angular.min.js"></script>
12 <script src="../js/angular-route.min.js"></script>
13 <script>
14    var app=angular.module(‘mapp‘,[‘ngRoute‘]);
15    app.config([‘$routeProvider‘,function($routeProvider){
16        $routeProvider.when("/list",{templateUrl:"view/list.html",controller: ‘listcontroller‘});
17         $routeProvider.otherwise({redirectTo:‘‘});
18        }]);
19    app.controller("listcontroller",function($scope){
20         $scope.mm=[1,2,3,4,5];
21        })
22 </script>
时间: 2024-12-14 21:48:00

AngularJs之八的相关文章

angularjs学习之八(angularjs中isolate scope的使用)

angular js中指令directive有个特别实用的东西,那就是 isolate scope (被隔离的scope) 关于详细他和全局的scope 有什么差别.能够參考以下这篇博文: AngularJS 全局scope与Isolate scope通信 本文主要解说 其详细的几种使用方式: 1. = 的使用 [html] <div class="card" ng-repeat="app in apps"> <app-info info=&quo

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如

AngularJs自定义过滤器filter

AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点,创建一个过滤器,例子中的过滤器是实现一个数值的平方. 以上的所指的App,控制器和过滤器均是依Angularjs而言. 下面是ASP.NET MVC的视图,实现数据过滤: 程序运行结果:

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

Angularjs[补21] - 显示注入,隐示注入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app="myApp"> <div ng-controller="secondController"> &