For the super basic Angular example with pure html check out the Angular Hello World post. This post is a step up; it's the regular basic angular tutorial (advanced basic tut coming soon!). Here we're going making use of a Javascript file to save data in an array let angular update our DOM elements acordingly. Yeaahhooo!
What Are We Making Here, Anyway?
Below You can test the Angular application that I'll show you how to make in this tutorial (We aren't using any css here, and my blog is automatically adding some styling to the webapp so yours might look slightly different when you drag the files into your browser):
Add a new task here:
To Do's
Let's See Some Code
Ok. I'm going to show you the html file, and we'll dissect it together. You can copy this whole snippet and save it as MyHtmlFile.html (the name really doesn't matter).
![]()
<div ng-app> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script> <script src="MyController.js"></script> <div ng-controller="ToDoListController"> Add a new task here: <input type="text" ng-model="newTask"/> <button ng-click="add()">Add</button> <h2>To Do's</h2> <ul> <li ng-repeat="task in taskArray"> {{ task }} </li> </ul> </div> </div>
Let's run through what's going on here.
The Javascript Controller
We'll also need a Javascript file. This will hold the logic for out controller. It can be any name you like, but be sure that it matches with the name of the file you put in the <script> tag in MyHtmlFile.
![]()
function ToDoListController($scope) { $scope.taskArray = ["clean apartment", "write some code", "go out to eat"]; console.log("hello"); $scope.add = function() { $scope.taskArray.push($scope.newTask); $scope.newTask = ""; } }
This is quite a simple file. Programmers shouldn't be bothered will classes and all that nonsense. ;)
Putting It All Together
Save these two files in the same folder in your computer. Then just drag the MyHtmlFile.html file into the browser and it should work. If you don't want to put them in the same folder then you just need to change the path in your MyController.js script tag to reflect where you have it, using either the relative or absolute path.
Comments
|
AuthorThe posts on this site are written and maintained by Jim Lynch. About Jim...
Categories
All
Archives
April 2018
|