In this project we'll create a basic Angular application from scratch. Getting used to structuring your Angular application is an important skill to get right. Many times as beginners the hardest part about Angular is figuring out where to put stuff. Hopefully this project will start you on the right path so you can correctly structure all your Angular projects in the future.
- Fork and clone this repository.
- Open the project directory in your coding IDE.
In this step, we'll create the skeleton of our HTML. This includes an index.html, styles.css, and a js folder.
- Create an
index.htmlfile.- Be sure to include a
DOCTYPEtag at the top. - Be sure to include a
htmltag. - Be sure to include a
headandtitletag. - Be sure to include a
bodytag.
- Be sure to include a
- Add a
paragraphelement to the html that says 'Woo'. - Create a
styles.cssfile.- Add css that changes the font color of the
paragraphelement tored.
- Add css that changes the font color of the
- Link
styles.cssin yourindex.htmlfile.- Once you have confirmed your
styles.cssis linked in yourindex.htmlfile, remove theparagraphelement fromindex.htmland the styles fromstyles.css.
- Once you have confirmed your
index.html
<!DOCTYPE html>
<html>
<head>
<title>My first angular app!</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
</body>
</html>In this step, we'll turn our plain web application into an Angular application. We'll do this by acquiring angular's CDN, specifying our application's name, and specifying our main controller's name.
- Open a browser window and navigate to Angular JS
- Click on the download button and then click on
DOWNLOAD ANGULARJSand copy the CDN link. - Open
index.htmland add ascripttag that links to the Angular CDN just before the closingbodytag. - Add a
ng-appattribute to thehtmltag. Let's call our Angular application"friendsList". - Add a
ng-controllerattribute to thebodytag. Let's call our Angular controller"mainCtrl".
index.html
<!DOCTYPE html>
<html ng-app="friendsList">
<head>
<title>My first angular app!</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body ng-controller="mainCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
</body>
</html>In this step, we'll create the javascript file that creates our Angular application.
- Create a file called
app.jsinjs/. - Open
js/app.js. - Initialize an Angular application called
"friendsList". - Open
index.htmland add ascripttag that links tojs/app.js.- The order is imperative here. Include
js/app.jsjust below the Angular CDN.
- The order is imperative here. Include
js/app.js
angular.module("friendsList", []); index.html
<!DOCTYPE html>
<html ng-app="friendsList">
<head>
<title>My first angular app!</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body ng-controller="mainCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script src="./js/app.js"></script>
</body>
</html>In this step, we'll create the javascript file that creates our main Angular controller.
- Create a filed called
mainCtrl.jsinjs/. - Open
js/mainCtrl.js. - Create an Angular controller called
mainCtrl. - Assign an array of your friends to a scope variable called
friends. - Open
index.htmland add ascripttag that links tojs/mainCtrl.js.- The order is imperative here. Include
js/mainCtrl.jsjust below thejs/app.js.
- The order is imperative here. Include
js/mainCtrl.js
angular.module('friendsList').controller('mainCtrl', function($scope){
$scope.friends = [ 'Garry', 'Jerry', 'Larry', 'Perry', 'Mary' ];
}); index.html
<!DOCTYPE html>
<html ng-app="friendsList">
<head>
<title>My first angular app!</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body ng-controller="mainCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script src="./js/app.js"></script>
<script src="./js/mainCtrl.js"></script>
</body>
</html>In this step, we'll take data from js/mainCtrl.js's scope and output it in index.html.
- Open
index.html. - Create a
H1tag that says"My Friends". - Under that
H1tag useng-repeatto create a list of friends.- The format should be a parent
divelement that has one childparagraphelement. - The
paragraphelement should display the name of the friend.
- The format should be a parent
index.html
<!DOCTYPE html>
<html ng-app="friendsList">
<head>
<title>My first angular app!</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body ng-controller="mainCtrl">
<h1>My Friends</h1>
<div ng-repeat="friend in friends">
<p>{{ friend }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/mainCtrl.js"></script>
</body>
</html>- Add a function on
mainCtrl's scope that can add friend names to thefriendsarray on scope.- Call this function
addFriend.
- Call this function
- Add an input field that a user can type a name into in
index.html. - Add a button in
index.htmlthat a user can click to invokeaddFriendoff of scope.
You should then be able to see friends added onto the DOM automagically!
If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.
© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.
