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

简介: 1、使用ng-route:<br><p>app.js中的写法:</p> <p></p><pre name="code" class="javascript">var app=angular.module('birthdayApp',['ngRoute']); app.config(function($routeProvider){ $routeProvider
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>




目录
相关文章
|
存储 测试技术 UED
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
Qt中实现界面回放的艺术:从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
287 1
|
10天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
43 1
|
3月前
|
机器学习/深度学习 算法 定位技术
Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现裂缝的检测识别(C#代码UI界面版)
本项目基于YOLOv8模型与C#界面,结合Baumer工业相机,实现裂缝的高效检测识别。支持图像、视频及摄像头输入,具备高精度与实时性,适用于桥梁、路面、隧道等多种工业场景。
364 27
|
8月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
949 1
|
10月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
9264 5
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
218 0
|
存储 前端开发 C语言
代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!
代码写得很牛逼但UI界面却搞得很丑?来,杨工带你!
233 0
|
前端开发
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
前端项目实战玖拾伍react-admin+material ui-踩坑-List的用法之disableSyncWithLocation查询字符串同步
168 0
|
前端开发
前端项目实战玖拾肆react-admin+material ui-踩坑-List的用法之disableAuthentication设置验证
前端项目实战玖拾肆react-admin+material ui-踩坑-List的用法之disableAuthentication设置验证
123 0
|
前端开发
前端项目实战玖拾叁react-admin+material ui-踩坑-List的用法之debounce设置显示时间
前端项目实战玖拾叁react-admin+material ui-踩坑-List的用法之debounce设置显示时间
132 0

热门文章

最新文章