• 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'
                        })
     
  • 相关阅读:
    ARC 117 D
    Maven依赖踩坑记录
    MobaXterm连接本地CentOS7
    Git在IDEA下的常用操作
    mq消息中间件
    nginx的作用
    Git的使用
    docker
    redis
    导出excel
  • 原文地址:https://www.cnblogs.com/coding4/p/5578405.html
Copyright © 2020-2023  润新知