[Angularjs]视图和路由(一)

写在前面

对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面。

将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一种更好的做法。

我们会将这些模版分解到视图中,并在布局模版中进行组装。Angularjs允许我们在$route服务的提供者$routeProvider中通过声明路由实现该功能呢。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

一个例子

在HTML中,需要引用AngularJS之后引用angular-route:

    <script src="JS/angular.min.js"></script>
    <script src="JS/angular-route.min.js"></script>

然后,要把ngRoute模块在应用中当作依赖加载进来:

    <script>
        var app = angular.module('app',['ngRoute']);
    </script>

布局模板
创建一个布局模版,就是告诉angularjs把模板渲染到何处。通过将ng-view指令和路由组合到一起,我们可以精确的指定当前路由所对应的模板在dom中的渲染位置。

例如,有这样一段html

<body>
    <header>这是header</header>
    <div>
        <div ng-view></div>
    </div>
    <footer>这是footer</footer>
</body>

在这个例子中,将所有需要渲染的内容都放到了<div>中,而<header>和<footer>中的内容在路由改变时不会发生变化。

ng-view是由ngRoute模块提供的一个特殊指令,它的独特作用是在HTML中给$route对应的视图内容占位。ng-view是一个优先级为1000的终极指令。angularjs不会运行同一个元素上的低优先级指令(例如<div ng-view></div>元素上其他指令都是没有意义的)

ngView指令遵循以下规则

1、每次触发$routeChangeSuccess事件,视图都会更新。

2、如果某个模版同当前的路由相关联:

创建一个新的作用域。

移除上一个视图,同时上一个作用域也会被清楚。

将新的作用域同当前摹本关联在一起。

如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来。

触发$viewContentLoaded事件。

如果提供了onload属性,调用该属性所指定的函数。

路由

 angularjs提供了when和otherwise两个方法来定义路由。用config函数在特定的模块或应用中定义路由。

现在,我们使用when方法添加一个特定的路由。

when方法:path,route

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <title>路由</title>
    <script src="JS/angular.min.js"></script>
    <script src="JS/angular-route.min.js"></script>
    <script>
        var app = angular.module('app', ['ngRoute']);
        app.config(['$routeProvider', function ($routeProvider) {
            //这里指定路由
            $routeProvider
               .when('/', {
                   templateUrl: './views/Login.html',
                   controller: 'LoginController'
               })
                .when('/Login', {
                    templateUrl: './views/Login.html',
                    controller: 'LoginController'
                })
        }]);
        //控制器
        app.controller('LoginController', function ($scope) {

        });
    </script>
    <style>
        ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <header>这是header</header>
    <div>
        <div ng-view></div>
    </div>
    <footer>这是footer</footer>
</body>
</html>

Login视图Login.html

<div>
    <ul>
        <li>用户名:<input type="text" /></li>
        <li>密    码:<input type="password" /></li>
        <li><button>登录</button><button>取消</button></li>
    </ul>
</div>

在浏览器中查看

当然访问这样的路由:http://localhost:18174/1_4_route.html#/Login也是可以的。

第一个参数:是路由路径,这个路径会与$location.path进行匹配,$location.path也就是当前的URL的路径。如果路径后面还有其他内容,或使用了双斜线也可以正常匹配。我们也可以在url中存储参数,参数需要以冒号开头(例如:name),获取url参数可以使用$routeParams获取。

第二个参数是配置对象,决定了当第一个参数中的路由能够匹配时具体做些什么。配置对象中可以进行设置的属性包括controller、template、templateUrl、resolve、redirectTo和reloadOnSearch。

 总结

这里介绍了路由与视图的简单知识点,也是由于在项目中用到的,也只能用到那儿,从哪儿学习,然后自己弄个demo学习了。这里举了一个简单的例子,先上手。当然,在实际的项目中,在项目中添加Controller,views等文件夹,使项目结构更清晰一些。

参考

angularjs权威教程

  • 博客地址:http://www.cnblogs.com/wolf-sun/
    博客版权:如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。
posted @ 2015-07-05 11:33  wolfy  阅读(2494)  评论(0编辑  收藏  举报