angular学习实战（1）

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wanglihui/blog/267125

文章标签：

#javascript #python #后端 #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

下面先给出angular相关的一些连接：

1. angular介绍

2.angular入门 (我感觉写的不错，简单明了)

我的实战：用户注册

后端代码，nodejs实现的restful

router.get('/registry', auth.registry);
router.get('/users/:user_id', auth.get);
router.post('/users',auth.create);

前段代码：

1.定义自己的ng-app

'use strict';

angular.module('ebookApp',['ngResource']);

2.定义服务

//定义通过restful获取用户信息接口
'use strict';
angular.module('ebookApp').factory('UserProxy',['$resource', function($resource){
    return $resource('/users/:user_id',{user_id:'@id'});
}]);

3.定义controller

'use strict';

//创建服务
angular.module('ebookApp').controller('AuthController',function($scope,$location,UserProxy){
    $scope.email = 'test@example.com';
    $scope.password = '';
    $scope.repassword = '';

    $scope.registry = function(){
        if(!$scope.password){
            alert("请输入密码");
            return false;
        }

        if($scope.password!==$scope.repassword){
            alert("两次密码不一致");
            return false;
        }

        var user = UserProxy.save({email:$scope.email, password:$scope.password});
        if(user){
            //做跳转处理
        }
    }
});

html 中按照顺序加载代码：（注意，需要按照一定顺序加载)

    script(src="http://cdn.bootcss.com/angular.js/1.3.0-beta.7/angular.js")
    script(src="http://cdn.bootcss.com/angular.js/1.3.0-beta.7/angular-resource.min.js")
    script(src="/angular/index.js")
    script(src="/angular/services/user.js")
    script(src="/angular/controllers/auth.js")

1.加载angular.js [免费CDN]

2.加载service

3.加载 controllers

设置ng-app属性 <html ng-app='ebookApp'>

html(ng-app='ebookApp')

设置data-ng-controller作用域,我设置的作用域为form

form(class="form-horizontal",role="form",data-ng-controller="AuthController")

设置提交按钮ng-click时间为click

button(type="submit",class="btn btn-default",ng-click="registry()") 注册

转载于:https://my.oschina.net/wanglihui/blog/267125