angular中ng-route和ng-ui-router的差异($http)

ngroute和ui-router并不是两个相互独立的部分,ui-router是社区库提供的用来提高ngroute的功能的,可用于多视图(嵌套),功能十分强大!

为了全面的了解两者的不同点,在这里我就加上$http请求时对两者进行比较,

1.引入文件:

 ngroute:<script src="angular-route.js"></script>

 ui-router:<script src="angular-ui-router.js"></script>

2.注入:

ngroute: var app = angular.module(‘app‘,[‘ngRoute‘]);

ui-router: var app = angular.module(‘app‘,[‘ui.router‘]);

3.配置:

【传参控制、判断条件、默认指定】

ngroute: app.config([‘$routeProvider‘,function ($routeProvider) {

$routeProvider.when(‘/index/:id‘,{
        templateUrl:‘template/musicList_tpl.html‘,
        controller:"musicControler"
    }).otherwise({
        redirectTo:‘/index/1‘//redirectTo
    })

]}  

ui-router:  app.config([‘$stateProvider‘,‘$urlRouterProvider‘,function ($stateProvider,$urlRouterProvider) {

$stateProvider.state("first",{//(first命名空间 绑定到视图可以也放在a标签)

多种传递参数方式:
            url:‘/index/:id‘,//(这才是hash值)
            //url:‘/index/{id:int}‘,
            //url:‘/index/?id&name‘,
            templateUrl:"me-musicList.html",
//            template:"<h1>sss</h1>",

可以拥有自身的控制器
            controller:"lrxController"
        })
            .state(‘music‘,{
                url:‘/music/:id‘,
                templateUrl:"me-musicList.html",
                controller:"lrxController"
            })
        //(router网页默认指定首页)   
        $urlRouterProvider.otherwise(‘index/1‘);

4.控制器:【依赖:$routeParams‘、‘$stateParams‘、回调:success/error、then/catch】

ngroute: app.controller(‘lrxController‘,[‘$routeParams‘,‘$http‘,‘$scope‘,function ($routeParams,$http,$scope) {//
//        console.log($routeParams.id);
        $http({
            url:‘listMusic.php‘,
            method:‘get‘,
            params:{
                id:$routeParams.id
            }
        }).success(function (res) {
            $scope.musicList = res;
        })
    }]);

ui-router: app.controller(‘lrxController‘,[‘$scope‘,‘$stateParams‘,"$http",function ($scope,$stateParams,$http) {
    $http({
        url: "listMusic.php",
        method: "get",
        params: {
            id: $stateParams.id
        }
    }).then(function (res) {//success替换成then
        console.log(res);
        $scope.musicList = res
    })
}]);

5.指令和视图:【参数,ng-view。 ui-sref、 ui-view

<li><a href="#/index/1">流行</a></li>
<li><a href="#/index/2">复古</a></li>

<div class="content" ng-view> </div>

<!--(ui-sref-active查看当前激活状态并设置Class)
.active a{
    font-size: 30px;
}-->

<li ui-sref-active="active"><a  ui-sref="home({id:1})">首页</a></li>
<li ui-sref-active="active" ui-sref="music({id:2})"><a>音乐</a></li>

<div class="content" ui-view> </div>

时间: 2024-07-31 13:01:21

angular中ng-route和ng-ui-router的差异($http)的相关文章

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

angular中出现错误的提示指令[ng:areq]的原因

angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq?p0=sellerService&p1=not%20a%20function%2C%20got%20undefined at angular.min.js:2 at ub (angular.min.js:14) at Pa (angular.min.js:14) at angular.min.js:57 at angular.min.js:45

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

angular min js 118 Error ng areq http //errors angularjs

1.错误描述 angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=username&p1=not%20a%20function%2C%20got%20undefined at Error (native) at http://127.0.0.1:8020/AngularJS/js/angular.min.js:6:412 at sb (http://127.0.0.1:8020/Angu

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

angular中的MVVM模式

在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(Whatever)框架,但angular框架整体上更接近MVVM模式.下面是Igor Minar发布在Google+ https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV的文章内容: MVC vs MVVM vs MVP. What a controver

angular 中配置跨域

1. 新建一个 proxy.conf.json { "/search": { "target": "https://wenku.baidu.com/search", "secure": false, "changeOrigin": true }, "/getnotice": { "target": "https://wenku.baidu.com/messa