Angularjs Learning UI and logic generation

Learn "angular advanced programming" understand the following

Requirements:

Create the following interface, there is a navigation bar, a watchlists panel, a plus button on the panel, a sentence stating "use+to Create a list" "

Clicking + will pop up the following window

Enter a name (for example: medical) a description (Medical stock monitor), the Create button will be highlighted, click Create, will display the following style

Implementation 1. UI is the implementation of HTML and CSS

Of course, to the app/view/directory to create HTML files, because the form of these two pages will be repeated in the later design, so they are stored as a template, placed in the app/view/templates, a call

Watchlist-panel.html, the name of a addlist-modal.html writer is very vivid, right?

First look at the first page of HTML: The inside of the style obviously called the bootstrap of the various classes, the strange face inside is Ng-click and ng-repeat, these two are angularjs things, now look

Ng-click= "ShowModal ()" means that when the user clicks on the button to execute ShowModal () This method, and onclick= "ShowModal ()" is not a mold out of it, O (∩_∩) o hahaha ~ well, nothing difficult , Ng-repeat is not explained in this first; So where is the function of ShowModal ()? Our usual web development like this function is placed in the Xxx.js file, and then all unified into the Scripts folder. Angularjs changed a new term called Directive Chinese translation is called instruction, the catalogue is in app/scripts/directives. All right.

<Divclass= "Panel Panel-info">  <Divclass= "Panel-heading">    <spanclass= "Glyphicon glyphicon-eye-open"></span>watchlists<!--Invoke ShowModal () handler on Click -    <Buttontype= "button"class= "btn btn-success btn-xs pull-right"Ng-click= "ShowModal ()">      <spanclass= "Glyphicon glyphicon-plus"></span>    </Button>  </Div>  <Divclass= "Panel-body">    <!--Show Help text If no watchlists exist -    <Divng-if= "!watchlists.length"class= "Text-center"> Use<spanclass= "Glyphicon glyphicon-plus"></span>To create a list</Div>    <Divclass= "List-group">      <!--Repeat through list in watchlists and create link -      <aclass= "List-group-item"Ng-class= "{active:currentlist = = list.id}"ng-repeat= "list in watchlists track by $index"Ng-click= "Gotolist (list.id)">{{List.name}}<!--Delete This list by invoking DeleteList () handler -        <Buttontype= "button"class= "Close"Ng-click= "DeleteList (list)">&times;        </Button>      </a>    </Div>  </Div></Div>

Angularjs not to start with Ng as a user-defined directive (OK, I always want to say is function), need to use one of its instructions to generate JS file.

Yo angular:directive Stk-watchlist-panel

╭ (╯^╰) ╮ implementation of the two, specifically I now do not know why, and later understand again. Anyway, it was generated in the Directives directory Stk-watchlist-panel.js

Open it and see

 ' use strict ' ;  /*  * * @ngdoc directive * @name StockDogApp.directive:stkWatchlistPanel * @description * # STK Watchlistpanel  */ angular.module (  ' Stockdogapp ' ). Directive ( ' Stkwatchlistpanel ', function   () { return   {templateurl:  ' <div></div> '  ' E '  link:  function   Postlink (Scope,      Element, Attrs) {element.text ( ' This is the Stkwatchlistpanel directive ' 

Oh, the book is also registered and dependent, look at the confused. It's easy to understand. At first we did not create the Stockdog project, Angularjs assigned it a module name, called Stockdogapp, and then called its own built-in. directive () This method, this method is to return the user-defined directives, also called command (or function). Look here to the. directive () parameter is just what we created with the Yo angular:directive command, but remove the connection symbol, O (∩_∩) o haha ~

Look what's going to return.

1) Templateurl: ' <div></div> ' means to return the HTML content, so we'll give it "app\views\templates\watchlist-panel.html"

2) Restrict: ' E ' says this has two meanings, one is to have this stkwatchlistpanel as an element, and the other means to limit its scope, which can only be useful in this context and useless elsewhere.

3) Link: Inside is to write properties and methods, how to feel like a constructor,

Today I learned to write this and continue tomorrow ....

Angularjs Learning UI and logic generation