最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我们会有一个对应的controller和views,还有一个routerconfig. 其实在AngularJS也有类似的东西。下面我会按照Asp.net的MVC框架搭建一个AngularJs的小Demo出来.

一.创建文件目录:

A. Controller文件夹放ng-controller的代码

B.JS 放置应用的外部JS 文件

C. Views 放置展示的HTML文件

D. index.html 放置默认页面, rounteConfig设置路由

二. 如何设置路由

2.1 设置路由.

通过$routeProvider实现, when表示当前uri地址, templateUri实际加载显示的html地址，controller是加载的模板对应的ng-controller模块.

angular

  .module('myapp', [

    'ngRoute'

  ])

  .config(function ($routeProvider) {

    $routeProvider

      .when('/', {

        templateUrl: 'views/main.html',

        controller: 'MainCtrl'

      })

      .when('/about', {

        templateUrl: 'views/about.html',

        controller: 'AboutCtrl'

      })

      .otherwise({

        redirectTo: '/'

      });

  });

　　　　 2.2 index.html编写

此页面实现了页面/main和/about的跳转. 上面的routeConfig.js文件会监控到目前访问的uri,然后加载对面的templateUri模板显示在下面

Notes: 1. 注意引用 angular-route.js文件

2. 注意链接请使用ng-href,切记别使用href,  ng-href会自动将当期文件目录加上, 如果用href='/about' 就会自动变为 电脑盘符:/about了.

<!DOCTYPE html>

<html>

<script src='js/angular.js'></script>

<script src='rounteConfig.js'></script>

<script src='js/angular-route.js'></script>

<script src='Controller/about.js'></script>

<script src='Controller/main.js'></script>

<head>

    <title></title>

</head>

<body>

   <div ng-app="myapp">

       <div>

            <a ng-href="#/">main</a>|<a ng-href="#/about">about</a>

       </div>

       <div ng-view=''></div>

   </div>

</body>

</html>

三. Views和Controller的设置.

3.1 我们可以在Views里面创建main.html 和 about.html文件.

Notes:因为是用模板的形式添加到index.html里面所以这里的html不需要引用任何Angularjs的js文件,只需要在index.html里面加载即可

<h1> Main page:{{message}}</h1>  // main.html           
<h1>About page:{{message}}}</h1> // about.html

3.3 在Controller文件夹里面添加main.js和about.js文件

angular.module('myapp')

  .controller('AboutCtrl', function ($scope) {

       $scope.message = 'I am frank, I am a DouBi'

  });
angular.module('myapp')

  .controller('MainCtrl', function ($scope) {

          $scope.message = "I am a .net coder, working for an USA-Online shopping mall";

  });

四.运行:

前面三节就算代码结束了, 于是我们可以开开心心点击index.html来看效果了. 可是坑人的我们会遇到一个跨域问题.            

五. Http-Server

出现了跨域问题,下面小编介绍一个轻量级的开源Node框架, http-server. https://github.com/indexzero/http-server .进去一看就是一个乌龟. PS: 曾经听过公司大牛说过。一般牛逼的开源东西都喜欢用动物做封面。

Notes:   --cors 可以解决跨域问题, 所以安装好http-server后,直接通过 http-server filepath --cors,启动我们的代码就行了. 启动后访问127.0.0.1:8080就会首先进入index.html页面. 因为NodeJS默认是当前文件夹Index.html.(运行后可能控制台会提示访问uri是0.0.0.0:8080,反正我的电脑访问这个是进不去的.前面给的地址是可以访问的.)

 -p  Port to use (defaults to )

 -a  Address to use (defaults to 0.0.0.0)

 -d  Show directory listings (defaults to 'True')

 -i  Display autoIndex (defaults to 'True')

 -e  or  --ext  Default file extension if none supplied (defaults to 'html')

 -s  or  --silent  Suppress log messages from output

 --cors  Enable CORS via the  Access-Control-Allow-Origin  header

 -o  Open browser window after staring the server

 -c  Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for  seconds (defaults to ''). To disable caching, use -c-.

六 扩展

  在网上有看过一些Angular教程, 发现generator-angualrjs这个框架挺不错的.https://github.com/yeoman/generator-angular 虽然依赖的东西比较多，不过值得一试.
  Demo地址: http://files.cnblogs.com/files/FourLeafCloverZc/AngualarJS_ngView.zip

AngularJS笔记---路由视图的更多相关文章

  1. AngularJs ui-router 路由的介绍

    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...

  2. django2笔记:路由path语法

    django2笔记:路由path语法 9月23,Django 发布了2.0a1版本,这是一个 feature freeze 版本,如果没有什么意外的话,2.0正式版不会再增加新的功能了.按照以往的规律 ...

  3. Django：学习笔记(9)——视图

    Django:学习笔记(9)——视图 基础视图 基于函数的视图,我们需要在使用条件语句来判断请求类型,并分支处理.但是在基于类的视图中,我们可以在类中定义不同请求类型的方法来处理相对应的请求. 基于函 ...

  4. angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?

    angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法 关键字: $timeout app.directive("myDirective",func ...

  5. Laravel教程 二：路由,视图,控制器工作流程

    Laravel教程 二:路由,视图,控制器工作流程 此文章为原创文章,未经同意,禁止转载. View Controller 上一篇教程我们走了那么长的路,终于把Laravel安装好了,这一篇教程我们就 ...

  6. AngularJS的路由、模块、依赖注入

    AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?

  7. 《玩转Django2.0》读书笔记-探究视图

    <玩转Django2.0>读书笔记-探究视图 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 视图(View)是Django的MTV架构模式的V部分,主要负责处理用户请求 ...

  8. odoo开发笔记 -- 搜索视图继承扩展

    odoo开发笔记 -- 搜索视图继承扩展

  9. Vue-初步了解vue-router的三要素：路由map 、路由视图、路由导航

    安装vue-router模块 使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...

随机推荐

  1. 在Winform程序中设置管理员权限及为用户组添加写入权限

    在我们一些Winform程序中,往往需要具有一些特殊的权限才能操作系统文件,我们可以设置运行程序具有管理员权限或者设置运行程序的目录具有写入的权限,如果是在操作系统里面,我们可以设置运行程序以管理员身 ...

  2. WinForm 窗体属性 窗体美化

    WinForm是·Net开发平台中对Windows Form的一种称谓. Windows窗体的一些重要特点如下: 功能强大:Windows窗体可用于设计窗体和可视控件,以创建丰富的基于Windows的 ...

  3. LA4287--tarjan

    题目大意: 在数学中,我们常常需要完成若干个命题的等价性证明.比如,有4个命题a,b,c,d,我们证明a↔b,然后b↔c,最后c↔d.注意每次证明都是双向的,因此一共完成了6次推导.另一种方法是a→b ...

  4. qam 64的设计

    module qam64(x,out,clk,clk1,rst);input x,clk,clk1,rst;output [18:0] out;reg [2:0] count;reg [5:0] re ...

  5. 从零开始学Python07作业源码：虚拟人生（仅供参考）

    bin目录: Simulated_life_start.py #!usr/bin/env python # -*- coding:utf-8 -*- # auther:Mr.chen # 描述: im ...

  6. WNMP集成环境下配置thinkPHP

    在网上查了许多解决方法,下面是自己测试过能行的方法,只需在nginx.conf文件添加内容就可以了. 打开nginx.conf文件 ## Try the requested URI as files ...

  7. php实现设计模式之 工厂方法模式

    <?php /* * *工厂方法模式,创建型模式 定义一个用于创建对象的工厂接口,让子类决定实例化哪一个类.Factory Method使用一个类的实例化延迟到其子类 * * 四个角色: * 工 ...

  8. 【HTML】 frame和iframe的区别

    1.frame不能脱离frameSet单独使用,iframe可以: 2.frame不能放在body中:如下可以正常显示: <!--<body>--> <frameset ...

  9. sharePoint 2016 弃用和删除的功能

    前言 sharepoint 2016版本正式发布,但是相比较2013版本,还是删除或者准备删除一些功能,我们需要了解一下哪些功能已经被删除掉或者在下一个版本中移除,因为这些可能影响我们现有系统是否能够 ...

  10. HotApp小程序统计云后台 免费的Https云后台服务器,方便学习小程序

    小程序学习有些地方需要后台,比如需要存储数据到服务器,比如微信登录. hotapp有免费的小程序云后台 包含基本的 新增,查询,修改,删除 操作,方便于学习,而且不需要微信appid 也可使用. 小程 ...