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\n‘ +
‘<em onclick="this.textContent=\‘code_bunny\‘">click here</em>\n‘ +
‘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'
})
浙公网安备 33010602011771号