I'm doing something today, ANGULARJS. Project Example Analysis

Today, I'm going to study the GitHub address for this ANGULARJS project: Https://github.com/monw3c/angularjs_pingan

Is it possible? This is not the best angularjs instance, but it's a good way to analyze what a principle

Okay, here we go, first of all, you're on this project. Git clone to Local

1 . Open the folder where the Angularjs_pingan is located

2, build a local service, here I use is http-server

NPM Install Http-server--save-dev

Then Http-server

Web address can be opened by the browser: localhost:8080/

Can see

See this page for analysis

Top of page: Divided into header and content

The header is made up of three parts

Back Button Title Favorites button

Implementation method:

 define ([' app '], function   (APP) { Span style= "color: #0000ff;" >return  app.controller (' Lcxqctrl ', [' $scope ', ' $rootScope ', ' $http ', function   ($scope, $rootScope, $http) {$rootScope. headtitle  = $rootScope. titl            E = "Product Details"  = false   = true   './json/lcxq.json ' ).                                Success ( function   (data) {              $scope. LC  = data;    }); }])

The title is {{Headtitle}}

Control return to previous page by ng-show= "Favbol" ng-show= "Backbol", whether the favorite button is displayed

Favorite button Click to toggle class to appear the effect of the mark here wrote a directive implementation specific code

<fav-btn></fav-btn>

　　

/** * Directive of the Favorites button*/define ([' jquery ', ' app ',function($,app) {app.directive (' Favbtn ', [function () {        return{restrict:' AE ', replace:true, Template:' <a href= ' javascript:void (0) "class=" Btn-fav "ng-show=" Favbol "><span></span></a>", Link:function(Scope, ele, attr) {$ (ele). Bind ("Click",function(){                    $( This). Toggleclass (' Btn-fav-select ')                })                            }            }  }])})

Content

Part of the main implementation of the next content

Content is primarily data rendering, which is taken from the background to the data to be applied

Define ([' App ', ' geofactory '),function(app,geofactory) {returnApp.controller (' Wdlistctrl ', [' $scope ', ' $rootScope ', ' $http ', ' geofactory ',function($scope, $rootScope, $http, geofactory) {$rootScope. Headtitle= $rootScope. title = "Business Outlets"; $rootScope. Favbol=false; $rootScope. Backbol=false; $scope. Getmore=function() {angular.element ('. List-box ul '). Append (' <p>1111111111111111111111</p> '))} $http. Get ('./json/yywd.json '). Success (function(data) { $scope. Branchs = Data.branchs;        }); }])})

<link rel= "stylesheet" href= "Css/yywd.css" type= "text/css"/><div class= "Search-box" > <b class= "DW" ; </b> <input type= "search" class= "search-input" placeholder= "Enter the dot address or name "> <button class=" btn "> Search </button> </div> <div class=" List-box "> <ul><li ng-repeat= "branch in Branchs" ><a href= "#/wdxq" > <dl> <dt class= "search-key-img" >  </dt> <dd class=" Search-key-title "> <p>{{b ranch.branch_name}}</p> </dd> <dd class= "Search-key-info" > <p                >{{branch.branch_type}}</p> </dd> <dd class= "Search-key-tag" > <p>{{branch.branch_addr}}</p> </dd> </dl> </a> &lt ;/li> </ul> <p class= "Get-more" ng-click= "Getmore ()"> Load more </p> </div> <div Geo refresh=" Refreshgeo () "></div>

This is the main routine in this.

The way the page jumps is:

/** * Routing*/define ([' App ',function(APP) {returnApp. Config ([' $routeProvider ',function($routeProvider) {$routeProvider. When (‘/‘, {templateurl:' Js/views/wd/list.html ', Controller:' Wdlistctrl '}). When ('/wdxq ', {templateurl:' Js/views/wd/xq.html ', Controller:' Wdxqctrl '}). When ('/sh ', {templateurl:' Js/views/sh/list.html ', Controller:' Shlistctrl '}). When ('/shxq ', {templateurl:' Js/views/sh/xq.html ', Controller:' Shxqctrl '}). When ('/listimg ', {templateurl:' Js/views/sh/listimg.html ', Controller:' Listimgctrl '}). When ('/jr ', {templateurl:' Js/views/jr/list.html ', Controller:' Jrlistctrl '}). When ('/lcxq ', {templateurl:' Js/views/jr/lcxq.html ', Controller:' Lcxqctrl '}). When ('/jjxq ', {templateurl:' Js/views/jr/jjxq.html ', Controller:' Jjxqctrl '}). Otherwise ({redirectto:‘/‘ }); //$locationProvider. Html5mode (True). Hashprefix ('! ');   }])     })

Analysis of the techniques used in index.html

Angular.bootstrap (document,["Pinganapp"]);
With this, don't add ng-app= "Pinganapp" to index.html.

Then is the controller's routines, each page corresponds to a controller, here note is written on the route

. When ('/jjxq ', {      templateurl: ' js/views/jr/jjxq.html ',      controller: ' Jjxqctrl '  })

And then I'll take a look at the angular project for a practical analysis, and finally to design a angular project

I'm doing something today, ANGULARJS. Project Example Analysis