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' })