DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • What to Pay Attention to as Automation Upends the Developer Experience
  • Using OpenAI Embeddings Search With SingleStoreDB
  • Integration Testing Tutorial: A Comprehensive Guide With Examples And Best Practices
  • 4 Expert Tips for High Availability and Disaster Recovery of Your Cloud Deployment

Trending

  • What to Pay Attention to as Automation Upends the Developer Experience
  • Using OpenAI Embeddings Search With SingleStoreDB
  • Integration Testing Tutorial: A Comprehensive Guide With Examples And Best Practices
  • 4 Expert Tips for High Availability and Disaster Recovery of Your Cloud Deployment
  1. DZone
  2. Coding
  3. Frameworks
  4. AngularJS - My First Hello World Tutorial

AngularJS - My First Hello World Tutorial

Tousif  Khan user avatar by
Tousif Khan
·
Apr. 07, 15 · Interview
Like (1)
Save
Tweet
Share
45.16K Views

Join the DZone community and get the full member experience.

Join For Free

i have been using angularjs for a while now and decided to write a series of post on angularjs. i will start with a basic hello world post which mostly focuses on how to setup the environment for angularjs to use it. later i will gradually cover up all (or most of) the important concepts on angularjs and then we will see how to integrate angularjs with other tools and frameworks (like spring mvc, laravel, etc).

what is angularjs ?

angularjs is an open-source web-based javascript framework developed to make easier to implements single page application (spa). it’s developed and maintained by google and community of developers and the goal is to simplify development and testing of client side web application.

angularjs hello world

follow the simple steps to create your first angularjs application.

step 01)

first step is to include angularjs javascript file into your html document. you can download the complete angularjs from https://angularjs.org site but for this tutorial i recommend you to use cdn url as below.

<!doctype html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>

</body>
</html>

step 02)

second step is to create an angular module and define a controller. the job of controller is to control the information that we put on page or in editing scenario controller save the information that use is typing into the page.

i am creating a separate javascript file and add the angular code.

var app = angular.module("app", []);
app.controller("hellocontroller", function($scope) {
  $scope.message = "hello, angularjs";	
});

as you can see in about code snippet, i called module() function of angular global variable and pass the module name. this module has function call controller() which we can use to define our first hellocontroller .

as you can see in above code snippet, controllers are just functions. we don’t invoke this functions but angular will call this controller function when it need to manage the section of html page which has ng-controller directive. when angular create controller, it pass the parameter to function called $scope . we can attached our models or data to this $scope variable.

step 03)

to use the controller on page, we need to use a directive called ng-controller . its an attribute which place in html and used to controller some area in html document.

<!doctype html>
<html lang="en">
<head>
<title>angularjs</title>
<script type="text/javascript" src="resources/js/angular.js"></script>
<script type="text/javascript" src="resources/js/script.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="hellocontroller">
		<h2>{{message}}</h2>
	</div>
</body>
</html>

remember, $scope is not the model but the things that we attached to it is the model. in the above code snippet we only attached a single property to the $scope called message which points to a string value. this one will make message available to us inside html so we can data bind into display.

output

i hope you enjoy the post, there are lot of post on angularjs to come in future so stay tuned.

AngularJS

Published at DZone with permission of Tousif Khan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • What to Pay Attention to as Automation Upends the Developer Experience
  • Using OpenAI Embeddings Search With SingleStoreDB
  • Integration Testing Tutorial: A Comprehensive Guide With Examples And Best Practices
  • 4 Expert Tips for High Availability and Disaster Recovery of Your Cloud Deployment

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: