AngularJs的路由是一个组件，需要自己额外添加，在目录/src/ngRoute中

三个文件route.js，routeParams.js，ngView.js

<html>

<head>

   <title>Angular JS Views</title>

<script src="js/Angular.js"></script>

<script type="text/javascript" src="js/route.js"></script>

<script type="text/javascript" src="js/routeParams.js"></script>

<script type="text/javascript" src="js/ngView.js"></script>

<script>

      var mainApp = angular.module("mainApp", ['ngRoute']);

      mainApp.config(['$routeProvider',

         function($routeProvider) {

            $routeProvider.

               when('/addStudent', {

                  templateUrl: 'addStudent.html',

                  controller: 'AddStudentController'

               }).

               when('/viewStudents', {

                  templateUrl: 'viewStudents.html',

                  controller: 'ViewStudentsController'

               }).

               otherwise({

                  redirectTo: '/addStudent'

               });

         }]);

         mainApp.controller('AddStudentController', function($scope) {

            $scope.message = "111111111111111111111";

         });

         mainApp.controller('ViewStudentsController', function($scope) {

            $scope.message = "222222222222222222222";

         });

   </script>

</head>

<body>

   <h2>AngularJS Sample Application</h2>

   <div ng-app="mainApp">

      <p><a href="#addStudent">Add Student</a></p>

      <p><a href="#viewStudents">View Students</a></p>

      <div ng-view></div>

      <script type="text/ng-template" id="addStudent.html">

         <h2> Add Student </h2>

         {{message}}

      </script>

      <script type="text/ng-template" id="viewStudents.html">

         <h2> View Students </h2>

         {{message}}

      </script>

   </div>

</body>

</html>

AngularJs记录学习03的更多相关文章

  1. AngularJs记录学习01

    <!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="C ...

  2. AngularJs记录学习04

    <html> <head> <title>Angular JS Views</title> <script src="js/Angula ...

  3. AngularJs记录学习02

    <!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="C ...

  4. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  5. Java虚拟机JVM学习03 连接过程：验证、准备、解析

    Java虚拟机JVM学习03 连接过程:验证.准备.解析 类被加载后,就进入连接阶段. 连接就是将已经读入到内存的类的二进制数据合并到虚拟机的运行时环境中去. 连接阶段三个步骤:验证.准备和解析. 类 ...

  6. Java学习03

    Java学习03 1.java面试一些问题 一.什么是变量 变量是指在程序执行期间可变的数据.类中的变量是用来表示累的属性的,在编程过程中,可以对变量的值进行修改.变量通常是可变的,即值是变化的 二. ...

  7. ThinkPhp学习03

    原文:ThinkPhp学习03 一.ThinkPHP 3 的输出      (重点) a.通过 echo 等PHP原生的输出方式在页面中输出 b.通过display方法输出   想分配变量可以使用as ...

  8. 开始记录学习java的笔记

    今天开始记录学习java的笔记,加油

  9. JVM学习03：性能监控工具

    JVM学习03:性能监控工具 写在前面:本系列分享主要参考资料是  周志明老师的<深入理解Java虚拟机>第二版. 性能监控工具知识要点Xmind梳理 案例分析 案例分析1-JPS 案例分 ...

随机推荐

  1. (转)由Uploadify插件想到的Flash无法传递Session和Cookie的问题解决

    在ASP.NET MVC3中使用Uploadify上传文件时发现,在后台需要验证登录状态的时候,Uploadify根本无法完成验证,因此,在后台只能使用非验证状态进行文件上传 —— 众所周知,这无异于 ...

  2. android L 新控件侧滑菜单DrawerLayout 使用教程

    介绍 drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产 ...

  3. 一张图看Google MVP设计架构

    这段时间看了一下Google官方推出的MVP架构案例,决定把对MVP的理解用类图的形式表述一下.MVP架构的设计思想确实非常值得学习,大家如果还不是很了解MVP,建议抽时间去研究研究,相信对大家的架构 ...

  4. Flex 列表控件中的操作

    主要操作包括:显示提示,使用图标,编辑列表条目中数据. 1.使用数据提示: 当鼠标停留在条目上时,可以显示该条目的相关数据提示. 当利用滚动条时,可以显示滚动条的相关提示. 在列表控件中使用showD ...

  5. IIS 发布MVC 提示开启目录浏览

    修改应用池 托管管道模式为 集成

  6. Swift学习（四）常量&变量&基础数据类型

    常量和变量 常量: 使用let关键词来声明一个常量 所指向的是一个特定类型的值,如数字10或者字符”hello”,常量的值是不能够被二次修改的 编程时使用常量能够让代码看起来更加安全和简洁! let ...

  7. Java 动态编译组件 & 类动态加载

    1.JDK6 动态编译组件 Java SE 6 之后自身集成了运行时编译的组件:javax.tools,存放在 tools.jar 包里,可以实现 Java 源代码编译,帮助扩展静态应用程序.该包中提 ...

  8. 用JS控制图片随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. JS里的onclick事件

    可以通过以下代码了解JS里的onclick事件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quo ...

  10. storm学习-storm入门

    超好资料: 英文:https://github.com/xetorthio/getting-started-with-storm/blob/master/ch03Topologies.asc 中文:h ...