angular项目一

1.Angularjs第三方模块angular-route和angular-ui-router的区别、差异、不同,

ui-router路由器是一个第三方模块，功能非常强大。它支持一切正常ngroute也可以做许多额外的功能。

 http://camnpr.com/javascript/1652.html

值得一提的是上面的这个链接的网址页面，的鼠标选中上去还有另一番景象，值得以后学习。

2.一些需要了解和看的angular的第三方的插件

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

name：字符串类型，代表模块的名称；

requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；

configFn：用来对该模块进行一些配置。

4.angular-cookies   先看这篇博客 http://my.oschina.net/loveking/blog/209484

AngularJS 提供了很好的 $cookie 和 $cookieStore API 用来处理 cookies 。 这两个服务都能够很好的发挥HTML5 cookies，当HTML5 API可用时浏览器会选择使用HTML5提供的API，如果不可用则默认选择document.cookies。无论那种方式，你都可以选择使用相同的API来进行工作。

5.angular-resource 看这个博客http://blog.csdn.net/yangnianbing110/article/details/43163155

6.angular-sanitize  这个博客 http://www.mamicode.com/info-detail-322397.html

<td><div ng-bind-html="myHtml"></div></td>

  $scope.myHtml = ‘<p style="color:blue">an html
‘ +
    ‘<em onclick="this.textContent=‘code_bunny‘">click here</em>
‘ +
    ‘snippet</p>‘;

7. angularjs-datetime-picker 

8. 一个完整的登录的angularjs的登录过程。

后台：首先捕获到/ 的路由然后，发现session中没有用户名，然后返回一个空字符串。

router.get('/', function (req, res, next) {
    if (req.session && req.session.currentUser) {
        res.render('index', {title: conf.APP.NAME, curUser: JSON.stringify(req.session.currentUser)});
    } else {
        res.render('index', {title: conf.APP.NAME, curUser: {}});
    }
});

然后在index.hbs的引擎中发现了空

<script language="javascript">
    var userStr = '{{{curUser}}}';
    if (userStr != '[object Object]')
        window.curUser = JSON.parse(userStr);
</script>

而我们的hbs渲染是，先渲染布局的layout.hbs.然后在加载所有angularjs依赖的模块，自己定义的js

先加载服务，factory和service，然后全局变量constant，然后config,然后加载run方法，然后加载controller。

所以run之前都是定义，我们直接看run方法，查看，怎么处理这个后台返回的用户名为空的情况。

angular.module('app')
    .run(
        ['$rootScope', '$state', '$stateParams', '$location',
            function ($rootScope, $state, $stateParams, $location) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
                var defaultRoutePage = {
                    "app.creative":"app.creative.list"
                };
                //用户状态变化
                $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
                    if (toState.name.indexOf('access') >= 0)return;// 如果是进入登录界面则允许
                    console.log(toState.name);
                    // 如果用户不存在
                    if (!$rootScope.user || !$rootScope.user.id) {
                        event.preventDefault();// 取消默认跳转行为
                        var data = {};
                        if (toState.name.indexOf('access') < 0) {
                            data = {from: toState.name, w: 'notLogin'};
                        }
                        $state.go("access.signin", data);//跳转到登录界面
                    } else {
                        // if (toState.name == "app.dashboard"){
                        //     $state.go("app.order");
                        // }
                    }
                    if (defaultRoutePage[toState.name]){
                        //$state.go(defaultRoutePage[toState.name]);
                        event.preventDefault();
                    }
                });

我们看到了定向到了access.signin里边。

.state('access.signin', {
                        url: '/signin',
                        templateUrl: 'tpl/page_signin.html',
                        controller: 'SigninFormController',
                        resolve: {
                            deps: ['uiLoad',
                                function (uiLoad) {
                                    return uiLoad.load(['javascripts/controllers/signin.js']);
                                }]
                        }
                    })

我们看到了js的位置，其中controller就在这个js中。

当输入用户名和密码后，触发了这个controller中的login()方法。

app.controller('SigninFormController', ['$scope', '$http', '$state', '$rootScope', '$stateParams', function ($scope, $http, $state, $rootScope, $stateParams) {
    $scope.user = {};
    $scope.user.email = localStorage.username;
    $scope.authError = null;
    $scope.login = function () {
        $scope.authError = null;
        // Try to login
        $http.post('users/signin', {email: $scope.user.email, password: $scope.user.password})
            .then(function (response) {
                if (!response.data || response.data.id < 1) {
                    $scope.authError = '用户名或密码不正确';
                } else {
                    localStorage && (localStorage.username = $scope.user.email);
                    $rootScope.user = response.data;
                    $state.go('app.dashboard');
                    //appTools.socket_connect();
                }
            }, function (x) {
                $scope.authError = 'Server Error';
            });
    };
}])
;

然后http请求users/signin中，出入的参数为{email: ,password:}

在后台的路由中，user中的users/signin  接受到了这个post的请求。

router.post('/signin', function (req, res, next) {
    var user = new User(req.body["email"], req.body["password"], -1, conf.GROUPS_DICT.ADMIN);
    user.login(function (err, data) {
        if (!err && data.length > 0) {
            if (data[0].password == user.password) {
                delete data[0].password;
                req.session.currentUser = data[0];
                res.json(data[0]);
            } else {
                res.json({id: 0});
            }
        } else {
            res.json(null);
        }
    })
});

然后去调用数据库中的login方法，然后发现了成功的话，req.session.currentUser=data[0];注意此时你必须要注意的是删除密码的user返回去。

然后执行前台的回调。

 $http.post('users/signin', {email: $scope.user.email, password: $scope.user.password})
            .then(function (response) {
                if (!response.data || response.data.id < 1) {
                    $scope.authError = '用户名或密码不正确';
                } else {
                    localStorage && (localStorage.username = $scope.user.email);
                    $rootScope.user = response.data;
                    $state.go('app.dashboard');
                    //appTools.socket_connect();
                }
            }, function (x) {
                $scope.authError = 'Server Error';
            });

localStorag 这个就是永久保留那个域（sessionStorage还有）
然后go app.dashboard这个路由。

.state('app.dashboard', {
                        url: '/dashboard',
                        controller: ["$rootScope", "$state", function ($rootScope, $state) {
                            if ($rootScope.user) {
                                if ($rootScope.user.permission == -1 || ($rootScope.user.permission & 1) == 1) {
                                    $state.go('app.creative.list');
                                } else if (($rootScope.user.permission & 2) == 2) {
                                    $state.go('app.order.list');
                                }
                            } else {
                                $state.go('access.signin');
                            }
                        }]
                        // templateUrl: 'tpl/app_dashboard_v1.html'
                    })