Using Yeoman to build AngularJS applications (8)--Let's build a Web application

Original address: http://yeoman.io/codelab/write-app.html

Create a new template to display a todo list

Open views/main.html

To start with a clean template, delete all the elements in the div in main.html and change the class attribute "Jumbotron" to "container".

Now main.html now as shown

<class= "container"></div>

Open Scritps/controllers/main.js

Modify an existing angular controller and add a Todos to replace the awesomethings

'Use Strict'; Angular.module ('Mytodoapp'). Controller ('Mainctrl',function($scope) {$scope. Todos= ['Item 1','Item 2','Item 3']; });

Then modify our view (main.html) to output our Todos content

<Divclass= "Container">  <H2>My Todos</H2>  <Pclass= "Form-group"ng-repeat= "Todo in Todos">    <inputtype= "text"Ng-model= "Todo"class= "Form-control">  </P></Div>

This ng-repeat property is a angular instruction that instantiates each element in the collection.

In our example, each paragraph element and content is converted to a virtual placeholder by ng-repeat. For each Todos element, angular will output a new <p><input></p> HTML block.

This Ng-model property is another angular directive that is valid for Input,select,textarea, and the user instruction displays a two-way binding. In our example, it exists with the word block input node.

Let's take a look at the display of Ng-repeat and Ng-model in the browser

Manually update the contents of $scope.todos

$scope. Todos = ['item 1'item2'item3  'Item 4'];

Because of the real-time read feature, you'll see these lists

Manually delete the fourth element and look at the contents of the browser

Add a Todo

Let's give the user a way to add todo

Change the main.html, add a <form> element to

<Divclass= "Container">  <H2>My Todos</H2>  <!--Todos Input -  <formrole= "form"Ng-submit= "Addtodo ()">    <Divclass= "Row">      <Divclass= "Input-group">        <inputtype= "text"Ng-model= "Todo"placeholder= "What needs to is done?"class= "Form-control">        <spanclass= "Input-group-btn">          <inputtype= "Submit"class= "Btn btn-primary"value= "Add">        </span>      </Div>    </Div>  </form>    <!--Todos List -    <Pclass= "Form-group"ng-repeat= "Todo in Todos">      <inputtype= "text"Ng-model= "Todo"class= "Form-control">    </P></Div>

This adds a form element with a Submit button, and Ng-submit is another angular directive. Return to your browser, this interface will be shown as follows

If you click the Add button now, nothing will happen, let's modify his

Ng-submit binds the angular expression to submit the event of the form, and if no practice attribute is added to the form, it blocks the default browser behavior. In our example, we will add a angular expression, Addtodo ()

The following Addtodo () method adds a new TODO element to the Todos list, and then clears the fields of the input field

function () {  $scope. Todos.push ($scope. Todo);   "' ;};

Add the Addtodo () method to the Main.js and add the Mainctrl controller, and your controller code looks like this

'Use Strict'; Angular.module ('Mytodoapp'). Controller ('Mainctrl',function($scope) {$scope. Todos= ['Item 1','Item 2','Item 3']; $scope. Addtodo=function() {$scope. Todos.push ($scope. Todo); $scope. Todo="';  }; });

Look at the app in the browser

Delete a Todo

Now add a method to remove Todo, we need to add a new remove button after each element.

Let's open main.html and add a button to the Ng-repeat directive. For beautiful display input box and delete button, change class content from "Form-group" to "Input-group".

Previous tags

 <!--  Todos list  -->  <  p  class  = "Form-group"   Ng-repeat  Span style= "color: #0000ff;" >= "Todo in Todos"  >  <  input  =" text "  Ng-model  = "Todo"   class  = "Form-control"  >  </ Span style= "color: #800000;" >p  >  

New tags

<!--Todos List -<Pclass= "Input-group"ng-repeat= "Todo in Todos">  <inputtype= "text"Ng-model= "Todo"class= "Form-control">  <spanclass= "Input-group-btn">    <Buttonclass= "Btn Btn-danger"Ng-click= "Removetodo ($index)"Aria-label= "Remove">X</Button>  </span></P>

Then look at your browser and your Todo app looks like this

Let's take a look at the angular directive above, and when an element is clicked, Ng-click will allow the user's behavior. In this case, we call the Removetodo () method and transmit the $index to the method.

The $index value will get the elements in the ng-repeat element of the current TODO element.

Now add in the controller, remove the TODO logic. The following Removetodo () method removes the corresponding element from the list of elements and uses the splice () method in JavaScript to remove the $index corresponding value

function (index) {  1);};

The new main.js are as follows

'Use Strict'; Angular.module ('Mytodoapp'). Controller ('Mainctrl',function($scope) {$scope. Todos= ['Item 1','Item 2','Item 3']; $scope. Addtodo=function() {$scope. Todos.push ($scope. Todo); $scope. Todo="';    }; $scope. Removetodo=function(index) {$scope. Todos.splice (Index,1);  }; });

Back to the browser, you can click the X button to delete the corresponding element

Using Yeoman to build AngularJS applications (8)--Let's build a Web application