angularjs中ng-route和ui-router简单用法的代码比较

1、使用ng-route:

app.js中的写法:

var app=angular.module('birthdayApp',['ngRoute']);
  app.config(function($routeProvider){
      $routeProvider
      .when('/', {
        templateUrl: 'views/login.html',
        controller: 'loginCtr',
        controllerAs: 'login'
      })
      .when('/regist', {
        templateUrl: 'views/regist.html',
        controller: 'registCtr',
        controllerAs: 'regist'
      })
      .otherwise({
        redirectTo: '/'
      });

  });

需要导入angular-route.js:

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

html中的写法:

<div ng-view></div>

2、使用ui-router:
app.js中的写法:

var app=angular.module('birthdayApp',['ui.router']);
app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/login');
    $stateProvider
    .state('login', {
	url: "/login",
	views: {
	   'view': {
		templateUrl: 'views/login.html',
		controller: 'loginCtr'
	   }
	}
   });
   $stateProvider
    .state('regist', {
	url: "/regist",
	views: {
	   'view': {
		templateUrl: 'views/regist.html',
		controller: 'registCtr'
	   }
	}
   });
});

需要导入angular-ui-router.js(需要下载):

<script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script>

html中的写法:

<div ui-view="view"></div>
时间: 2024-12-31 15:01:19

angularjs中ng-route和ui-router简单用法的代码比较的相关文章

在React框架中实现一些AngularJS中ng指令的例子_AngularJS

首先设定一段Angularjs代码的ng-class: <i class="header-help-icon down" ng-class="{up:showMenu}"></i>   比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面      <i classNa

AngularJS中的API(接口)简单实现_AngularJS

AngularJS API API 意为 Application Programming Interface(应用程序编程接口). AngularJS 全局 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问. 以下列出了一些通用的 API 函数:   API 描述 angular.lowercase() 转换字符串为小写 angular.uppercase() 转

php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)_php技巧

共分四个文件,分别是创建.增加.删除.修改四个功能,变量都是写死的,改一改用$_POST方式接收就可以用了 //index.php 创建功能 复制代码 代码如下: <?php $xmlpatch = 'index.xml'; $_id = '1'; $_title = 'title1'; $_content = 'content1'; $_author = 'author1'; $_sendtime = 'time1'; $_htmlpatch = '1.html'; jb51.net$doc

AngularJS中关于ng-class指令的几种实现方式详解_AngularJS

前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&

AngularJS中的ng-repeat迭代数组的例子

先来粘贴代码: <html> <head>     <script src="//cdn.bootcss.com/angular.js/1.3.17/angular.js"></script>     <script type="text/javascript">     angular.module('app',[]).controller('HelloCtrl',function ($scope) {

AngularJS ng-change 指令的详解及简单实例_AngularJS

AngularJS ng-change 指令 AngularJS 实例 当输入框的值改变时执行函数: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

探讨AngularJs中ui.route的简单应用_AngularJS

html页面代码 <body ng-app="myApp"> <div ui-view></div> <div ui-view="login"></div> <div ui-view="enroll"></div> </body> 需要引用的ui.router.js文件 <script src="angular-ui-router.js

Angularjs中UI Router的使用方法_AngularJS

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p

Angularjs中UI Router全攻略_AngularJS

首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon