AngularJS 笔记二

一切从模块化开始

// angular.module(name, [requires], [configFn]);

// name：字符串类型，代表模块的名称；
// requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；
var app = angular.module('app', ["ui.router"]);
// 路由：https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router
app.config(['$stateProvider','$urlRouterProvider', 
function($stateProvider,$urlRouterProvider){
   $stateProvider.state(stateName, stateConfig); //配置路由
   //stateConfig默认包含的字段: template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data
   $stateProvider.state('userInfo',{});         //配置路由
   $urlRouterProvider.otherwise(defaultPath);    //默认的路由
   $urlRouterProvider.otherwise('/home.html');
})
$state.go('userInfo');

angular.bootstrap —–此方法用于手动加载angularjs模板

angular.bootstrap(element, [modules], [config]);
ng-app='main';
// 等同于
angular.bootstrap(document, ['main'])

data-ui-view 根据路由指定的url填充页面

监听页面加载完毕

// 在controller里面利用on或者watch
$scope.$on('$viewContentLoaded', function () {
     Metronic.initComponents();
});

localStorage 本地存储

localStorage.setItem("MenuTree", angular.toJson(data));
localStorage.setItem("userInfo", angular.toJson($scope.userInfo));
localStorage.getItem("userInfo")

Angular的事件机制—$rootScope.$broadcast

app.controller('SomeCtrl', ['$rootScope', function($rootScope) {
    $rootScope.$broadcast("rootEvent", 'Data to Send');
    // $rootScope也可以通过$on订阅从$rootScope.$broadcast发布的事件
    $rootScope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}])
// 所有$scope都能够通过$on订阅从$rootScope.$broadcast发布的事件
.controller('ParentCtrl', ['$scope', function($scope) {
    $scope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}])
.controller('SiblingOneCtrl', ['$scope', function($scope) {
    $scope.$on("rootEvent", function(event, 'Data to Send') {
        // balabala
    });
}])