Maison > Article > interface Web > Comment construire un projet simple en AngularJS ? Implémentation de la fonction d'angularjs (avec exemple complet)
Comment construire un projet simple en AngularJS ? Implémentation de la fonction d'angularjs (avec exemple complet)
- 寻∝梦original
- 2018-09-08 15:24:113856parcourir
Cet article parle principalement du projet pour démarrer avec angularjs. Les étudiants intéressés peuvent venir jeter un œil. Il existe de nombreux codes que vous pouvez essayer.
Introduction à angulairejs
AngularJS est un framework JavaScript. AngularJS étend le HTML via des directives et réalise une liaison bidirectionnelle entre la page et les données js via des expressions. Le corps principal adopte le mode MVC (model, view, contrôleur) que les développeurs connaissent très bien, et utilise le mode routage (route) pour implémenter des sauts de page unique (Ps : la fonction de configuration du module AngularJS est utilisée pour configurer les règles de routage ). AngularJS possède de nombreuses fonctionnalités, dont les plus essentielles sont : MVC, modularisation, liaison de données bidirectionnelle automatisée, balises sémantiques, injection de dépendances, etc.
Pour plus de détails, veuillez vous référer à : Site Web PHP chinois AManuel de développement ngularJS.
PS : S'il y a des développeurs qui utilisent Eclipse : 
Icône du corps du projet
Configuration du projet
index.html
<!doctype html><!--html 元素是 AngularJS 应用: ng-app="myApp" 的容器 --><html ng-app="myApp"><head>
<!--
所有资源脚本引用需在index页面，如果在子页面引用将失效
1、一次性全在html加载
2、用oclazyload插件
3、自己使用angular的$q 写一个加载文件的服务
-->
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.js"></script>
<script src="js/utils/url.js"></script>
<script src="js/utils/selfmd5.js"></script>
<script src="js/utils/toast.js"></script>
<script type="text/javascript" src="js/lib/jquery.min.js"></script>
<script src="js/controller/indexController.js"></script>
<script src="js/controller/homeController.js"></script>
<script src="js/service/HttpService.js"></script></head><!--body是 HTML 页面中控制器: ng-controller="indexController" 的作用域--><body ng-controller="indexController"><p>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<!--数据绑定-->
<h1>Hello {{yourName}}!</h1>
<!--p 是 HTML 页面中视图: ng-view 的作用域子页面注入区（PS:本人理解）-->
<p ng-view>
</p></p></body></html>indexController.js
/**
* Created by Administrator on 2017/12/1.
*/
//应用程序声明以及将controller、service等放入容器中（PS:类似于SpringMvc的IOC容器）var myApp = angular.module('myApp',["ngRoute",'homeController','httpService']);//控制器声明myApp.controller('indexController', ['$scope',function($scope) {
//数据绑定
$scope.yourName= 'Hola!'; //ng-view监听
$scope.$on("$viewContentLoaded",function(){
console.log("ng-view content loaded!");
}); $scope.$on("$routeChangeStart",function(event,next,current){
//event.preventDefault(); //cancel url change
console.log("route change start!");
});
}]);//模块的 config 函数用于配置路由规则myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'content/homepage.html', //如果路由对页面指明了controller，页面无需使用ng-controller="homeController"声明，否则将会 //出现homeController多次调用
controller: 'homeController'
})
.otherwise({
redirectTo: '/home'
});
});homepage.html (implémentant la fonction de connexion simple)
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>SingleCase</title></head><body ><!--数据绑定-->
<input ng-model="user.account"/>
<!-- <input ng-model="user.password"/>-->
<input ng-model="user.pwd"/>
<!--事件绑定--><input type="button" ng-click="login()"><!--列表遍历--><ul ng-repeat="menu in menus">
<li ng-click="menu_2Show(menu.lid)" >{{menu.name}}
<ul ng-repeat="menu_list in menu.menu_list" style="display: none" id="menu_2{{menu.lid}}">
<li ng-click="menu_2Click(menu_list.name)"> {{menu_list.name}}</li>
</ul>
</li></ul></body></html>homeController .js (implémentant fonction de connexion simple)
/**
* Created by Administrator on 2017/12/1.
*/angular.module("homeController",["ngRoute"])
<!--注入service等工具-->
.controller("homeController",function($scope,$route,httpService,$location){
<!--声明modle进行数据绑定--> $scope.user={account:'',password:'',pwd:''};
<!--对密码进行MD5加密--> $scope.user.password = hex_md5($scope.user.pwd);
<!--登陆方法--> $scope.login=function(){
<!--调用封装的post请求-->
httpService.postReq( $scope.user,'/loginbusiness/login','用户登陆！').then(function(data){
if(data.code>0){ //controller中进行路由跳转
$location.path("/home");
}else{ //Android效果toast
alerToast(data.code+':'+data.msg,2000);
}
});
}; $scope.role={role:0}; $scope.menus=null;
httpService.postReq( $scope.role,'','用户登陆！').then(function(data){
$scope.menus=data.data;
}); $scope.menu_2Click=function(name){
alerToast(name,2000);
} $scope.menu_2Show=function(lid){
$('#menu_2'+lid).show();
}
});HttpService.js (service d'encapsulation des requêtes réseau)
/**
* Created by Administrator on 2017/9/28.
*/angular.module("httpService",[])//请求头设置 PS:可写 拦截器 全局$http注入loading效果
.config(["$httpProvider", function ($httpProvider) {
//更改 Content-Type
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8"; $httpProvider.defaults.headers.post["Accept"] = "*/*"; $httpProvider.defaults.transformRequest = function (data) {
//把JSON数据转换成字符串形式
if (data !== undefined) { return $.param(data);
} return data;
};
}])
.service('httpService', function( $http,$q) {
//生成deferred异步对象
var deferred=$q.defer();
this.postReq = function(reqdata,api,msg) {
console.log(msg+":start!"); $http({
method: "POST",
url: lh_business_url+api,
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
data:reqdata
}).success(function(data, status) {
console.log(data); //执行到这里时，改变deferred状态为执行成功，返回data为从后台取到的数据，可以继续执行then,done
deferred.resolve( data);
}).
error(function(data, status) {
alert('连接服务器出错！'); //执行到这里时，改变deferred状态为执行失败，返回data为报错，可以继续执行fail
// deferred.reject('连接服务器出错！');
});
console.log(msg+":end!"); //起到保护作用，不允许函数外部改变函数内的deferred状态
return deferred.promise;
};
this.getReq = function(data,api,msg) {
console.log(msg+":start!"); $http.get(lh_business_url+api, {
params:data
}).success(function (data) {
console.log(data); // 如果连接成功，延时返回给调用者
deferred.resolve(data);
}) .error(function () {
alert('连接服务器出错！'); // deferred.reject('连接服务器出错！');
});
console.log(msg+":end!"); return deferred.promise;
};
});Cet article se termine ici (si vous voulez en voir plus, allez simplement sur le site Web PHP chinois Manuel d'utilisation d'AngularJS pour apprendre). Si vous avez des questions, vous pouvez laisser un message ci-dessous.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Que sont les services dans AngularJS ? Introduction à l'utilisation d'AngularJSArticle suivant：Que sont les services dans AngularJS ? Introduction à l'utilisation d'AngularJS
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript