AngularJs记录学习03

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>
时间: 2024-10-18 13:14:07

AngularJs记录学习03的相关文章

AngularJs记录学习01

<!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/Angular.js"></script> <script> //控制器注册 var

AngularJs记录学习04

<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/javascr

AngularJs记录学习02

<!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/Angular.js"></script> <script> //控制器注册 var

[转载]AngularJS入门教程03:迭代器

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

AngularJS交互学习教程推荐

0.目录 目录 预览 详述 1 Learn Angular 2 AngularJS入门教程 感悟 声明 1.预览 急着赶时间,没有时间听我废话的同学,直接看今天推荐的两个AngularJS交互学习教程. CodeCademy的LearnAngularJS Fenby的AngularJS入门教程 2.详述 许多研究表明,探究式学习.游戏式学习是较为高效的学习方式,编程语言学习更是如此.正如看电影和玩游戏的区别,你在看电影的时候,你完全处于被动的.接受内容状态,而玩游戏则全然不同,你会和计算机有交互

Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

angularJs的学习笔记

angularJs的学习笔记,记录一下,额外学习,不用到项目中,怕以后忘了. 参考地址:http://www.ituring.com.cn/article/13473  改地址比较老了  建议多看看评论  英文好的可以看看这个 https://docs.angularjs.org/tutorial 1.搭建学习环境 本人用的Mac mini,根据参考地址学习angularJS,需要安装node和Testacular a.安装node 终端中: git clone git://github.com

设计模式学习03—抽象工厂模式

1.动机与定义 工厂模式中,一个工厂仅仅能提供一个或一类产品,当产品种类较多,形成产品系列(比方我们要创建跨平台的button,菜单,文本框等等一系列GUI控件: 单纯使用工厂模式会产生大量工厂,并且后期维护也不方便,我们能够从产品中找到规律,假设产品等级相对固定,以后仅仅会新增产品族,那么我们就能够把整个产品族放到一个工厂创建,以后新增其它系统产品族也很方便,例如以下图: 这样的模式就是抽象工厂,工厂方法模式针对的是一个产品等级结构,而抽象工厂模式则须要面对多个产品等级结构,一个工厂等级结构能

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新