AngularJS笔记---路由视图
最近有同事提到过关于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笔记---路由视图的更多相关文章
- AngularJs ui-router 路由的介绍
AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...
- django2笔记:路由path语法
django2笔记:路由path语法 9月23,Django 发布了2.0a1版本,这是一个 feature freeze 版本,如果没有什么意外的话,2.0正式版不会再增加新的功能了.按照以往的规律 ...
- Django：学习笔记(9)——视图
Django:学习笔记(9)——视图 基础视图 基于函数的视图,我们需要在使用条件语句来判断请求类型,并分支处理.但是在基于类的视图中,我们可以在类中定义不同请求类型的方法来处理相对应的请求. 基于函 ...
- angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?
angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法 关键字: $timeout app.directive("myDirective",func ...
- Laravel教程 二：路由,视图,控制器工作流程
Laravel教程 二:路由,视图,控制器工作流程 此文章为原创文章,未经同意,禁止转载. View Controller 上一篇教程我们走了那么长的路,终于把Laravel安装好了,这一篇教程我们就 ...
- AngularJS的路由、模块、依赖注入
AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?
- 《玩转Django2.0》读书笔记-探究视图
<玩转Django2.0>读书笔记-探究视图 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 视图(View)是Django的MTV架构模式的V部分,主要负责处理用户请求 ...
- odoo开发笔记 -- 搜索视图继承扩展
odoo开发笔记 -- 搜索视图继承扩展
- Vue-初步了解vue-router的三要素：路由map 、路由视图、路由导航
安装vue-router模块 使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...
随机推荐
- 机器学习 - ML
CNCC - 2016 | 机器学习(原文链接) Machine Learning - ML,机器学习起源于人工智能,是AI的一个分支. 机器学习的理论基础:计算学习理论 - Computationa ...
- 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\web\4b49f661\23a749fc\App_Web_default.aspx.cdcab7d2.zii776dc.dll”--“拒绝访问。 ” 解决方法:
解决方法: 找到C:\Windows\Temp 目录,在其属性->安全->编辑->添加 IIS_IUSERS用户 赋予"完全控制"权限 ...注意:这可能不是最佳 ...
- Spring MVC 处理静态资源文件
摘要: 三个方案: 1.方案一:激活Tomcat的defaultServlet来处理静态文件 2.方案二: 在spring3.0.4以后版本提供了mvc:resources (需要配置annotati ...
- EC笔记，第二部分：8.别让异常逃离析构函数
1.为何析构函数不应该抛出异常? 有两种情况: 1).假设析构函数中有众多语句,而第一条语句抛出异常(或者其他语句),那么抛出异常以后的语句就得不到执行.而通常我们在析构函数中写的是清理资 ...
- JVM-String比较-字节码分析
一道String字符串比较问题引发的字节码分析 public class a { public static void main(String[] args)throws Exception{ } p ...
- 使用block进行界面之间的反向传值
目标:在两个独立的控制器的界面之间进行反向传值 关键技术:block 代码编写及运行环境:Xcode6.4 / 模拟器8.4 语言:Objective-C 注:使用纯代码实现,不使用xib/story ...
- Java源代码-迭代器模式
Java无疑是最成功的项目之一了,而在其中学习设计模式和架构设计,无疑是最好不过了. 概念: 提供一种方法访问容器中的各个元素,而又不暴露该对象的内部细节. 使用场景: 和容器经常在一起,我们定义了一 ...
- Idea开发环境中搭建Maven并且使用Maven打包部署程序
1.配置Maven的环境变量 a.首先我们去maven官网下载Maven程序,解压到安装目录,如图所示: b.配置M2_HOME的环境变量,然后将该变量添加到Path中 备注:必须要有JAVA_HOM ...
- float包裹性与破坏性及清除浮动几种方法
1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...
- 修改NavigationBarItem的字体大小和颜色的使用方法
//创建一个左边按钮 UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" st ...