ANGULARJS development environment Build, out Hello Word

From contact Angularjs to now more than 1 years have been using this framework to develop a large and small number of projects, reference to some other projects of the structural template and their own attempt to try, from the beginning of the project structure of confusion complex to now I think is a relatively good structural division, Now organize into a series to stay as a team training content and share, if there is a better program welcome to study the discussion.
We use a simple news management system as a primer to create a system based on the ANGULARJS framework from scratch, first we start by creating a angularjs framework. The series contains instructions, services, filters, interceptors in gulp, Bower, sass angular, and we use sublime Text3 as the development editor.
This series of GitHub address: Https://github.com/chenfengjw163/angular-news.git

After you create the Angular-news project on GitHub, on the local clone:

clone https://github.com/chenfengjw163/angular-news.git
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

Open with Sublime:

All right, let's get started!

Gulp, Bower and Sass installation

If you have used gulp and bower, you can skip the following text to the next step.
Gulp, Bower and sass do not know what things the students themselves Google.
Let's briefly describe how to install:
Installing nodejs:https://nodejs.org/en/download/
Sass needs to install the Ruby environment: http://www.w3cplus.com/sassguide/install.html
After installation, the command line executes:

npm -v
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

-v
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

Displaying the version number indicates that the installation was successful and then executes:

install
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

install
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

Install Bower and Gulp.

Because this project we will use Gulp build tools and bower management so we first initialize the configuration of Gulp and Bower in the project directory Open command line, execute:

gulp init
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

And

bower init
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

After completing the information as prompted, the configuration files for the two tools are created.
Next we install some NPM tools:

--save gulp-concat gulp-connect gulp-sass
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

Gulp-concat is used to merge files, Gulp-connect for creating a Web debugging environment, and Gulp-sass for compiling sass files.
And some bower dependent packages:

--save angular angular-resource angular-ui-router bootstarp jquery
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

PS: If the installation is slow or can not be installed directly, then use the VPN link to see.
After the installation, we will have two more folders under the project directory: bower_components and the node_moudules installation directory of the Bower and Gulp tools respectively.

Create a folder under the root directory scss as our sass source file (suffix. scss) directory and www as our development resource directory.
In WWW we create the following folder to classify the development files:

bower_componentsnode_mouduleswww--css # Sass source file compiled as CSS file directory --directive  #angular指令的存放目录 --img  #图片资源文件 --js  #公共js脚本文件目录 --views  #页面极页面js文件 --index .html   #angular应用的启动页面  gulpfile .js   #gulp构建任务文件  package .json   #npm项目文件  bower .json   #bower项目文件  
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
  
  
 
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
  
  
 

The folder is created, we create a gulpfile.js file in the root directory as a Gulp task list, task execution compiles sass file, merge JS file and implement Livereload, and edit the following content, if you do not understand Gulp task writing can be self-understanding under:

varGulp =require(' Gulp '), connect =require(' Gulp-connect '), concat =require(' Gulp-concat '); Sass =require(' Gulp-sass ');//connect task opens a Web debugging service that accesses http://localhost:8080Gulp.task (' Connect ', function () {Connect.server ({port:8080, Livereload:true});});//alljs task, perform merge JS taskGulp.task (' Alljs ', function () {    //Merge all the JS files in the array into the WWW folder for All.js    returnGULP.SRC ([' Www/js/*.js ',' Www/directive/*/*.js ',' Www/views/*/*.js ']). PIPE (Concat ("All.js"). Pipe (Gulp.dest ("www/"));});//sass tasks, performing compilation sass TasksGulp.task (' Sass ', function () {    //Compile the Scss file to merge the compiled files into css.css into the Www/css folder    returnGULP.SRC ([' Scss/*.scss ']). PIPE (Sass (). On (' ERROR ', sass.logerror)). Pipe (Concat ("Css.css"). Pipe (Gulp.dest ("Www/css"));})//reload tasks, perform alljs and sass tasks before executing reloadGulp.task (' Reload ', [' Alljs ',' Sass '], function () {    //Refresh Web Debug Server    returnGULP.SRC ([' www/']). Pipe (Connect.reload ());})//watch Task, open a monitorGulp.task (' Watch ', function () {    //Monitor the modification of the files in the array and perform the reload task if there are any modificationsGulp.watch ([' Scss/*.scss ',' www/index.html ',' Www/js/*.js ',' www/directive/*/* ',' www/views/*/* '], [' Reload ']);});//Default gulp task, execute Gulp directly to start default, start Connect and watch task before defaultGulp.task (' Default ', [' Connect ',' Watch ']);
  
 

   
  
 
   
 1 
 
   
 2 
 
   
 3 
 
   
 4 
 
   
 5 
 
   
 6 
 
   
 7 
 Li>8 
   
 9 
 
   
 ten 
 
   
 one 
 
   
 
 
   
 
 
   
 + 
 
   
 all 
 
   
 + 
 
   
 17  
 
   
 
 
   
 
 
   
 + 
 
   
 + 
 
   
 + 
 
   
/
 
   
 + 
 
   
 + 
 
   
 + 
 
   
 + 
 
   
 
 
   
 3 
 
   
, 
 
   
, 
 
   
, 
 
   
, 
 
   
, 
 
   
, 
 
   
 6 
 
   
 PNs 
 
   
 all 
 
   
 
 
   
 all 
 
   
 + 
 
  
  
 
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
   
14
 
   
15
 
   
16
 
   
17
 
   
18
 
   
19
 
   
20
 
   
21st
 
   
22
 
   
23
 
   
24
 
   
25
 
   
26
 
   
27
 
   
28
 
   
29
 
   
30
 
   
31
 
   
32
 
   
33
 
   
34
 
   
35
 
   
36
 
   
37
 
   
38
 
   
39
 
   
40
 
   
41
 
  
  
 

OK, the preparation is almost ready, so let's write the contents of index.html:

<! DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Press release</title>    <script src="/bower_components/angular/angular.min.js"></script>    <script src="/bower_components/angular-resource/angular-resource.min.js" ></script>    <script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js" ></script>    <script src="All.js"></script></head><body Ng-app="newsApp">    <div ui-view>    </div></body></html>
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
   
14
 
   
15
 
   
16
 
  
  
 
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
   
14
 
   
15
 
   
16
 
  
  
 

Referring to the Bower installed resource file and our own all.js file, adding Ng-app content on the body is the angular app name, because we use Ui-router as our route management we need to use the Ui-view directive as the Content page label ( If you use angular, the default route management is Ng-view).

So our project directory becomes a look:

Starting a Web debugging service requires only the command line execution under the project:

gulp
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

Open Http://localhost:8080/www We can only see a blank page, because we have not added a page, we next try to add a test page to see.

www/jscreate app.js in the directory as the angular application master file, of course it will eventually be merged into All.js!
App.js:

(function() { ‘use strict‘; angular.module(‘newsApp‘, [ ‘ngResource‘, ‘ui.router‘, ‘newsApp.home‘ ]) .config(function($urlRouterProvider) { $urlRouterProvider.otherwise(‘/home‘); });})();
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
  
  
 
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
  
  
 

Create NEWSAPP modules that refer to Ngresource and Ui.router, respectively, to the service that implements the RESTful interface and the Ui-router routing service, and Newsapp.home is the submodule that we create ourselves.
The route default path is configured in. config.

www/viewsCreate a Home sub-function folder in a folder and create two files home.html and corresponding home.js
Home.html:

<p>hello world!</p>
 
   
  

  
    
   
1
 
   
  
 
   
  

  
    
   
1
 
   
  

Home.js:

 (function   ()  {  ' use strict ' ; Angular. Module ( "Newsapp.home" , []). config (function   ($stateProvider)  { $ Stateprovider.state ( ' home ' , {url:  '/'/", Controller:  "Homectrl" , Templateurl:  view S/home/home.html ' }). Controller ( "Homectrl" , Homectrl); function  homeCtrl   ($scope)  { }})();
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
   
14
 
   
15
 
   
16
 
  
  
 
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
   
14
 
   
15
 
   
16
 
  
  
 

You can see that Home.js has created a submodule newsapp.home and configured a corresponding controller and template page called home routing.

When we create these files, we can www folder to see an auto-generated all.js file, this is our Gulp tool to our all scattered in various folders JS merged JS file, the advantage is that we can be in the development of the project according to different functions to create a different directory to classify the development file is very clear, and do not need to refer to the page so many number of Files, in Gulp we can also add processing steps such as: Confusing JS, compressing JS

We don't need to refresh the page so we can see the two most familiar words on the page:
Hello world~
OK, a angular frame has been built!

In the next issue we will demonstrate if you are using angular to develop specific features.

ANGULARJS development environment Build, out Hello Word