angularjs

来源：互联网发布：网络神曲歌曲小鸡编辑：程序博客网时间：2024/06/08 00:15

/** * Created by qingyun on 16/10/24. */

ng －router 控制器销毁angular.module('myApp',['ngRoute']).config(['$routeProvider',function ($routeProvider) {    $routeProvider.when('/home',{        templateUrl : 'home.html',        controller :'homeController'    });    $routeProvider.when('/other',{        templateUrl : 'other.html',        controller : 'otherController'    });    $routeProvider.otherwise('/home')}])    .controller('homeController',['$scope','$location',function ($scope,$location) {        $scope.goToOtherView =function () {            $location.path('/other')        }    }])    .controller('childController',['$scope','$location','$interval',function ($scope,$location,$interval) {        $scope.num = 0 ;     var interval = $interval(function () {            $scope.num++        },1000);               $scope.$on('$destroy',function () {         //切换路由时,控制器会被销毁,控制器会通过$broadcast 传播一个$destroy的消息,在自作用域中可以监听到这则消息 ,自控制器中我们就可以做些清理工作,比如关闭定时器等          $interval.cancel(interval)           console.log('拜拜,父控制器不见了')       })    }])    .controller('otherController',['$scope','$location',function ($scope,$location) {        $scope.goBack =function () {          window.history.go(-1)        }    }])

/** * Created by qingyun on 16/10/24. */
 ui-router路由跳转
angular.module('myApp',['ui.router'])    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {        //ui-router 是 ng-route的一个升级版,基于状态机来组织接口,而不是简单的URL路由,基于ngRoute的,能完成一些场景的功能(有很多优秀的特性,比如ui-view嵌套,ngRoute是无法实现ui-view嵌套的),尤其是在手机上        // 第一个参数时状态 而不是路由 一般情况下名字和路由名字一样        $stateProvider.state('home',{            //路由            url : "/home",            // 这里的属性都和之前ngRoute用法基本一致            // template : "home.html",            templateUrl : "home.html"            // controller : ""            //resolve : {}        })            .state('other',{                url : '/other',                templateUrl : "other.html"            });        //意外跳转        //ngRoute 默认跳转路由 "/" 如果when方法中有"/"路由 ,即使不写意外跳转也能跳转相应页面,但是uiRoute不行必须写意外跳转        $urlRouterProvider.otherwise('/home')    }]);

/** * Created by qingyun on 16/10/24. */// ui-router 几种意外跳转的方式angular.module('myApp',['ui.router'])//    uiRouter 理念:管理状态 ,路由辅助.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {    $stateProvider        .state('home',{            url : '/home',            templateUrl : 'home.html'        })    .state('other',{        url : '/other',        templateUrl : 'other.html'    })    //几种意外跳转方式    // 1    // $urlRouterProvider.otherwise('/home');    // 2    // $urlRouterProvider.otherwise('home');    // 3    // $urlRouterProvider.otherwise(function ($injector,$location) {    //     $location.path('/home')    // });    // 4    $urlRouterProvider.rule(function ($injector,$location) {     return "/home"    });  // 5    //第二个参数重新指向路由   第一个参数 : 默认为空字符串,想要匹配的入口路劲    // $urlRouterProvider.when('','/home');   // 6    //第二个参数可以是函数 ,但必须返回一个路由路径    // $urlRouterProvider.when('',function(){return "home"});}])

/** * Created by qingyun on 16/10/24. */// ui-router  resolve 中 可以直接引用上面的属性 服务 key值就是服务名字angular.module('myApp',['ui.router']).config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {    $stateProvider        .state('home',{            url : '/home',            templateUrl : 'home.html',            resolve : {                myFoo : "foo",                //在这里,我们可以使用上面的属性,这里面和ngRoute里面不一样,上面的key就是服务的名字                getName : function (myFoo) {                    return myFoo.name;                },                //如果返回的对象是一个promise,那么该对象就会在控制器实例化之前解析                setHttp : function ($http) {                    return $http({                        url : 'js/wy.json',                        method :'get'                    })                },                getData :function (setHttp) {                    return setHttp.data                }            },            controller : 'homeController'        })    .state('other',{        url : '/other',        templateUrl : 'other.html'    });    $urlRouterProvider.otherwise('/home')   }])    .factory('foo',function () {        return {            name :'zy',            age :22        }    }).controller('homeController',['$scope','myFoo','getName','setHttp','getData',function ($scope,myFoo,getName,setHttp,getData) {    console.log(myFoo);    console.log(getName);    console.log(setHttp);    console.log(getData)}])

0 0