I am new in Angular, so I choose Angular2.
I was following official guide here
Here is code
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
app.js
var AppComponent = ng
.Component({
selector: 'my-app'
})
.View({
template: '<h1 id="output">My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
Then I type live-server --port=8000, but it display nothing.
You need to check if DOM is ready with DOMContentLoaded first and then Bootstrap the app.
Official Angular 2.0 has mentioned to bootstrap.
Also as Jorg said:
"Angular 2 is currently in Developer Preview. We recommend using Angular 1.X for production applications"
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.sfx.dev.js"></script>
<script src="main.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
Javascript (ES5):
var AppComponent = ng
.Component({
selector: 'my-app'
})
.View({
template: '<h1 id="output">My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
Plunker Here
can you add ng.bootstrap(AppComponent, []); to the bottom on app.js and update your angular version to
<script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.sfx.dev.js"></script>
Related
Just defined an app 'Demo' in AngularJS
'use strict';
var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
$scope.obj={language_selected : {'name':'Choose a language'}};
$scope.language_list = [{'name': 'english', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png'},{'name': 'italian', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/it.png'}];
});
Now defined an HTML page correspondingly
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<link rel="stylesheet" href="select.css">
</head>
<body ng-controller="DemoCtrl">
<div class="select_list" ng-class='{active:active}' ng-click="active=!active">
<span ng-style="{'background-image':'url('+obj.language_selected.url+')'}">{{obj.language_selected.name}}</span>
<ul class="options">
<li class="select_list_option" ng-repeat="language in language_list" ng-click="obj.language_selected=language" ng-style="{'background-image':'url('+language.url+')'}">{{language.name}}</li>
</ul>
</div>
</body>
</html>
EDIT: Checked the appName -> 'demo' & ng-app is demo & controller is DemoCtrl & ng-controller is DemoCtrl. It is defined appropriately.
The plunker now gives out an empty page.
Am I missing anything here ? Plunker link here: http://next.plnkr.co/edit/nXsUgM7nEsfg7jXh
You forgot to load you js code, please add
<script src="demo.js"></script>
Here is plunker http://next.plnkr.co/edit/g4yKhngP1TyJ8jLr
You are missing to add the reference to demo.js in the index.html. Add the references as follows.
<script src="demo.js"></script>
PLUNKER DEMO
Seems like you forgot to load your js code
<script src="demo.js"></script>
demo
I have just started working on Angularjs and facing a problem in calling the factory defined in other module. Actually I need to clean the code so I have to build all the functionalities in one js file and I have to use them in my main js file where I have defined my controllers. I have made a simple code to understand the problem. Thanks in advance
Following is the Html file:-
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="function.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="MyServiceModuleOne">
<div ng-controller="TestController">
<button type="button" ng-click="getFn()"> Test </button>
</div>
</body>
</html>
Following is script.js file
var myModule= angular.module('MyServiceModuleTwo',['MyServiceModuleOne']);
myModule.controller('TestController', ['$scope', 'notify', function($scope, notify){
$scope.getFn = function() {
notify.sampleFun();
}
}]);
Following is function.js file:-
var myModule = angular.module('MyServiceModuleOne', []);
myModule.factory('notify', function() {
return {
sampleFun: function() {
alert('hi');
}
};
});
There are couple of changes needed.
You are referencing MyServiceModuleOne as root module, but the controller you are referencing is in MyServiceModuleTwo.
So change your ng-app from MyServiceModuleOne to MyServiceModuleTwo.
I've updated the plnkr
http://plnkr.co/edit/Lvdl4XpReQr6AzsuOQhP?p=preview
While using angular-material getting following error : Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.4.2/$injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
Routing.JS :
(function () {
var app = angular.module('angularMaterial', ['ngRoute','ngMaterial']);
app.config(function ($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: 'main.html',
controller: 'MainController'
})
.otherwise({ redirectTo: "/main" });
});
}());
Index.html : Shell for displaying html pages based on routing
<html lang="en" ng-app="angularMaterial">
<head>
<title>Angular Material Fundamentals</title>
<meta charset="utf-8" />
<link data-require="angular-material#*" data-semver="1.1.0" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<script data-require="angular-material#*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-animate#*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js"></script>
<script data-require="angular-aria#1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script data-require="angular-messages#1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="routing.js"></script>
<script src="MainController.js"></script>
</head>
<body ng-cloak="">
<header>
<h1>
Angular Material Fundamentals </h1>
</header>
<div ng-view=""></div>
</body>
</html>
Main.html :
<div>
<md-content flex layout-padding>
{{message}}
</md-content>
</div>
MainController.js :
function MainController($scope) {
$scope.message = "Angular Material is a UI component library for Angular JS developers. Angular Material components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.";
}
MainController.$inject = ['$scope'];
angular.module('angularMaterial').controller('MainController', MainController);
Please help.....Thanks
Angular material have a dependency on angular so you need to add angular.js first and then angular-material.min.js resource file.
The order of adding script resource should be
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-material#*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
Plunker : http://plnkr.co/edit/D8KNdE4phpxwCf6N5s4x?p=preview
I try simple Universal windows 8.1 project.
My default.html page:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8" />
<!-- WinJS references -->
<script src="scripts/services/winstore-jscompat.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/winjs/js/base.min.js"></script>
<script src="node_modules/winjs/js/ui.min.js"></script>
<!-- angular -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-winjs/js/angular-winjs.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/EventsController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Project has one simple view and simple controller. When I use "win-list-view" in my view, (even empty win-list-view without bounding) I got error which i do not understand.
HTML1300: Navigation occurred.
default.html
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
default.html
Error: [$compile:noslot] http://errors.angularjs.org/1.5.3/$compile/noslot? p0=true&p1=%3Cdiv%20class%3D%22ng-isolate-scope%22%20item-data- source%3D%22manufacturers%22%20ng-transclude%3D%22true%22%3E
...
My page is open, but data on screen are in json format. Whole data binding array is shown on screen.
View:
<div>
<win-list-view item-data-source="manufacturers">
<win-item-template>
<div>
<h4>{{item.data.title}}</h4>
<h6>{{item.data.text}}</h6>
</div>
</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
</div>
Controller:
(function () {
angular.module("mainApp")
.controller("EventsController", function ($scope) {
$scope.manufacturers = [
{ title: "marvelous mint", text: "gelato" },
{ title: "succulent strawberry", text: "sorbet" },
];
})
}());
My app:
(function() {
angular.module("mainApp", ["ngRoute", "winjs"]);
angular.module("mainApp")
.config(function ($routeProvider) {
$routeProvider
.when("/events", {
templateUrl: "views/events.html",
controller: "EventsController"
})
.otherwise({ redirectTo: "/events" });
});
}());
Why "win-list-view" tag on view caused that error?
Work on windows 8 with VS2015, maybe it has influence.
I couldn't get my angular code to run in plunker. I have attached the details. Could any of you help me out? Basically it's a problem with ngcontroller I guess but I am not sure.
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
{{ 5 / 2 }}<br>
{{message}}
</body>
</html>
Contents of javascript script.js file
var MainController = function($scope){
$scope.message = "Welcome!";
};
Plunk
http://plnkr.co/edit/mzgdELALCP7DN2ikJHsC?p=preview
In version 1.3.*, you cannot longer declare a global controller function.
Instead define a module, and use your controller function:
var SidController = function($scope){
$scope.message = "WElcome.";
};
SidController.$inject = ['$scope'];
angular.module('app', []).controller('SidController', SidController);
In your html
<html ng-app="app">
See this plunker.
I had the same issue.. Well done on starting a tutorial! Simply replace the script in your index.html with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
I suppose the library Plunker currently has is outdated or something.
Working Plunkr (with a different AngularJS version. #user3906922 has a better answer, where your version stays the same).
Use this for HTML for instance:
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="SidController">
<h1>Hello Plunker!</h1>
{{ 5 / 2 }}<br>
{{message}}
</div>
</body>
</html>
Check this plunkr
You need to define your module and then register the controller
http://plnkr.co/edit/9zAV5nSWH05FYscEWYZ5?p=preview
angular.module( 'demoApp', []);
angular.module( 'demoApp' )
.controller( 'SidController', function($scope){
$scope.message = "WElcome.";
});
You should create your module.
angular.module('app', []).controller("SidController", function($scope) {
$scope.message = "WElcome.";
});
Then in your html element, set your attribute like this:
ng-app="app"