It can be done in several ways, depending on your desired setup and development preferences. Here are a few options:
1. Simple HTML file:
Create an HTML file and include the AngularJS library (downloadable from https://angularjs.org/) or add src.
Define an element with the ng-app directive to mark it as the root of your AngularJS application.
Inside the element, add an element with the ng-bind directive and bind it to a string containing your "Hello World" message.
Open the HTML file in your browser, and you should see "Hello World" displayed.
The Basics
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
// Or <p>Hello <span ng-bind = "name"></span>!</p>
</div>
</body>
</html>
How AngularJS Integrates with HTML
The ng-app directive indicates the start of AngularJS application.
The ng-model directive creates a model variable named name, which can be used with the HTML page and within the div having ng-app directive.
The ng-bind then uses the name model to be displayed in the HTML <span> tag whenever the user enters input in the text box.
Closing</div> tag indicates the end of AngularJS application.
2. Using Node.js and the Angular CLI:
Install Node.js and the Angular CLI (https://angular.io/cli).
Open a terminal and run ng new hello-world to create a new AngularJS project.
Navigate to the hello-world directory and run ng serve.
Open http://localhost:4200 in your browser. You should see a default AngularJS application, and you can modify the provided files to display your "Hello World" message.
3. Online Code Editor:
Several online code editors like CodePen or JS Bin allow you to write and run code snippets directly in your browser.
Create a new HTML file and include the AngularJS library.
Add your "Hello World" code as described in option 1.
Run the code snippet in the browser, and you should see your message displayed.
No comments:
Post a Comment