Over a million developers have joined DZone.

AngularJS—Hello World with Angular-Seed: A Code Example

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

This article introduces Angular-Seed project for AngularJS beginners and, presents a code example along with instructions to get started with Angular-Seed project. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

  • What is Angular-Seed project?
  • Pre-requisites for installing Angular Seed Project
  • Install and Configure Angular-Seed Project
  • Hello World – Code Example

If you are an AngularJS beginner or have started developing angular apps and, have been wondering about the standard folder structure layout to put your HTML, CSS and JS files, you would want to consider Angular-Seed project. Angular seed project can be seen as a template or kick-starter project that could be installed to get started with your Angular apps. It comes with some of the following:

  • Folder structure layout for storing your HTML, CSS and JS files
  • A single page app, by default, consisting of a main page and two views, view1 and view2, to get you quickly started with SPA.
  • All the necessary angularJS files that could be found within app/bower_components after the installation is done.
  • Unit test tools installed and configured
  • Sample unit tests for views, view1 and view2 to get you started quickly with unit tests
  • End-to-end tests
Pre-requisites for installing Angular Seed Project
  • Install Git. Once done, you should be able to open the Git console and work from there.
  • Install node.js and its package manager (npm). This would be required because number of node.js tools have been used to initialize and test angular-seed.

Get more details on Angular-Seed project page.

Install and Configure Angular-Seed Project
  • Open git console. Create a folder, maybe ngworkspace, and go within that folder. Type “git clone https://github.com/angular/angular-seed.git”. This would create a folder angular-seed with several files and folder within.
  • Go to angular-seed folder (cd angular-seed)
  • Type “npm install” to install tools and angular framework code (angularJS libraries). You would find following two folders created:
    • node_modules – contains the npm packages for the tools we need
    • app/bower_components – contains the angular framework files
  • Once done with above, start the server with command, “npm start”.
  • Goto a browser and type “http://localhost:8000/app/index.html”
  • You would see angular app with two views, view1 and view2 and default page redirected to View1.
Hello World – Code Example

Once installed angular-seed project, lets do a quick hello world and a sample program to demonstrate ng-repeat.

  • Open app/view1/view1.html. Paste the following code . Pay attention to some of the following:
    • Usage of ng-model directive to bind name with input field.
    • Usage of ng-click directive to associate addName() event
    • Usage of template between {\{name}}
    • Usage of ng-repeat directive to display name items
<input type="text" ng-model="name" placeholder="Type your name here"/>
<input type="button" value="Add Name" ng-click="addName()"/>
<h1>Hello, {{name}}</h1>
<li ng-repeat="nm in names">{{nm.name}}</li>
  • Open app/view1/views1.js. Paste the code below. Pay attention to some of the following:
    • $scope injected within controller
    • Attributes such as name, names attached to the $scope object
    • Method such as addName is attached to $scope object
'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'

.controller('View1Ctrl', [ '$scope', function($scope) {
$scope.name = '';
$scope.names = [{name:"Chris"}, {name:"Calvin"}];
$scope.addName = function() {
$scope.names.push( {'name':$scope.name} );
$scope.name = '';

Following is how it would look like after following above instructions and typing name, James in the textfield.

Hello World with Angularjs Seed App

Hello World with Angularjs Seed App

Check the Hello-AngularJS tutorials website for multiple tutorials on AngularJS presented along with code samples.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}