<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/upgrade.dev.js"></script>
<body>
<h1>Angular 1 to 2</h1>
<script>
angular.element(document).ready(function () {
var upgrade_1 = require('angular2/upgrade');
var upgradeAdapter = new upgrade_1.UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['app'], { strictDi: true });
});
</script>
</body>
</html>
Above is the html that I'm trying to use to setup upgrade adapter for angular2.
I'm currently just trying to load the upgrade adapter. The above code in the script tag is what the example typescript code complied to js as per angular website. https://angular.io/docs/ts/latest/guide/upgrade.html#!#bootstrapping-hybrid-angular-1-2-applications
The issue is I keep getting the following error: "'require' is undefined".
Why is systemjs not loading it up?
Below is a great step by step on how to setup the upgrade adapter
https://medium.com/#SevenLee/configuration-tips-to-build-hybrid-angular-1-and-angular-2-project-in-real-world-230b715629dc#.g0tsratdm
My main issue was in my tsconfig file I needed to use "module": "system" instead of "module": "commonjs"
this then compiles the upgrade adapter code to:
system.register(['angular2/upgrade'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var upgrade_1;
var upgradeAdapter;
return {
setters:[
function (upgrade_1_1) {
upgrade_1 = upgrade_1_1;
}],
execute: function() {
upgradeAdapter = new upgrade_1.UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['app'], { strictDi: true });
}
}
});
Related
I am new in angularjs tech. I have implemented one registration function in my project.
I have created one js file for routing and controller functionality in my project and its working fine, If i will do separate router and controller file then I am application is failing.
I need to do separate file for the router and controller.
Below is my code in one file.
app.js file
var app = angular.module('crasApp', [ 'ngRoute' ]);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl : "./views/xyz.html",
controller : "searchCtrl"
}).when("/registration", {
templateUrl : "./views/abc.html",
controller : "MainCtrl"
}).when("/view", {
templateUrl : "./views/viewsdata.html",
controller : "overViewCtrl"
});
});
app
.controller(
"MainCtrl",
function($scope, $http) {
console.log("Hi");
});
index.html
<!DOCTYPE html>
<html ng-app="crasApp">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<head>
<!-- Use Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/abn-stylesheet.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./javascripts/jquery/jquery-1.12.4.js"></script>
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script>
<script src="./javascripts/angular/bootstrap.min.js"></script>
<!-- <script src="./javascripts/angular/angular.min.js"></script> -->
<script src="./javascripts/controllers/app.js"></script>
<!-- <script src="./javascripts/angular/angular-route.js"></script> -->
<script src="./javascripts/router/router.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<div ng-view></div>
</html>
xyz.html
<!DOCTYPE html>
<html ng-app="crasApp">
<head>
<!-- Use Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/abn-stylesheet.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/ngDatepicker.css">
<script src="./javascripts/jquery/jquery-1.12.4.js"></script>
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script>
<script src="./javascripts/angular/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> -->
<script src="./javascripts/controllers/app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hi
</body>
<html>
So, Its working file if I am using one app.js file
I want to do seprate router and controller file.
router functionality i moved into different file and its working router functionality but not working controller functionality..
Separate router file as below.
router.js
var app = angular.module('crasApp', [ 'ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl : "./views/retrieveTerminationReason.html",
/*controller : "searchCtrl"*/
}).when("/registration", {
templateUrl : "./views/registration.html",
/*controller : "MainCtrl"*/
}).when("/view", {
templateUrl : "./views/forbearanceRegistartionOverview.html",
/*controller : "overViewCtrl"*/
});
});
app.js as a controller
var app = angular.module('crasApp', []);
app
.controller(
'MainCtrl',
function($scope, $http) {
console.log("Hi");
});
Please any one can help on this part.
In router.js, change var app = angular.module('crasApp', [ 'ngRoute']) to var app = angular.module('crasApp').
Also, in app.js, your declaration should be: var app = angular.module('crasApp', ['ngRoute']);. Since you have a single module, 'crasApp', you must declare it's dependencies when you declare the module itself.
What you have currently is re-creating the module vs. appending functionality.
Also, be sure to include your router.js as well in your HTML .
the issue
when you're using var app = angular.module('crasApp', [ 'ngRoute']); in your route.js file you are initializing new module NOT adding config to existing module!
the best approach for structuring an Angular App is NOT using variable you can call your module in a different way like:
app.js
var MODULE_NAME = 'crasApp'
angular.module(MODULE_NAME, ['ngRoute']);
to create controller controllers.js
angular.module(MODULE_NAME).controller('MainCtrl',function($scope, $http) { //Note removing the dependencies array
console.log("Hi");
});
to create config routes.js
angular.module(MODULE_NAME).config(function($routeProvider) { //Note removing the dependencies array
$routeProvider.when("/", {
templateUrl : "./views/retrieveTerminationReason.html",
/*controller : "searchCtrl"*/
})
in your index.html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/controllers.js"></script>
</head>
Note you don't need ng-controller directive in your HTML because defining it in routes is enough
separating services
create services.js for example
angular.module(MODULE_NAME).factory('Users',function($http,$q) {
return {
getUsers:function(){
var def = $q.defer();
$http({url:'URL_HERE',method:'GET'}).then(function(res){
def.resolve(res)
},function(err){
def.reject(err);
})
}
}
})
using in controller
angular.module(MODULE_NAME).controller('MainCtrl',function($scope, Users) { //Note Users is the name of the factory created above
Users.getUsers().then(function(res){
$scope.users=res;
},function(err){
$scope.error = err;
})
});
Hey guys i got a problem with implementing ngDialog in my current project.
For testing i have created following working code:
test.php
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog-theme-plain.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.js"></script>
<script src="neuejs.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openDialog($event)">Open Me!</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Bilder
</div>
</script>
</body>
</html>
and in a seperate neuejs.js:
var app = angular.module('myapp', ['ngDialog']);
app.controller('MainCtrl', function($scope, ngDialog) {
$scope.openDialog = function($event) {
var dialog = ngDialog.open({
template: 'templateId',
scope: $scope,
controller: 'FileController',
$event: $event,
className: 'ngdialog-theme-plain'
});
};
});
This works just fine. Exactly what i want.
My existing project has an app.js file with
var iMPULS = angular.module('iMPULS', []);
and the project works fine as well, but if i want to use ngDialog and change the module to:
var iMPULS = angular.module('iMPULS', ['ngDialog']);
the whole layout is kind of messed up, no link in my iMPULS.conf work anymore plus i got "Error: No module: ngDialog" concerning to angular.min.js in Firefox-Browserconsole.
How could this be? I just addes the 'ngDialog' to the module in app.js just like in the testfiles above.
I have a factory service as below
FamilyService.js
(function(){
'use strict';
angular.module('app')
.factory('ABC', FamilyService);
FamilyService.$inject = ['DEF'];
function FamilyService(DEF) {
function returnTrue() {
var a="true";
}
}
}());
I want to call returnTrue method in My test case
**TestFamilyService.js**
describe('testing my_controller.my_function', function () {
var mockedFactory, $rootScope, $controller;
beforeEach(module('app', function($provide) {
mockedFactory = {
save: jasmine.createSpy()
};
$provide.value('ABC', mockedFactory);
}));
it('should call the save function', function() {
expect(mockedFactory.returnTrue()).toHaveBeenCalled();
});
});
**specrunner.html**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.4.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
<script src="lib/jasmine-2.4.1/jasmine.js"></script>
<script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.4.1/boot.js"></script>
<script src="lib/jasmine-2.4.1/angular.js"></script>
<script src="lib/jasmine-2.4.1/angular-mocks.js"></script>
<!-- include source files here... -->
<script src="src/Player.js"></script>
<script src="src/webapp/Mock.js"></script>
<script src="src/webapp/FamilyService.js"></script>
<!-- include spec files here... -->
<script src="spec/TestFamilyService.js"></script>
</head>
<body>
</body>
</html>
When i run specrunner.html in the browser it displays
Error: No module: app
TypeError: Unable to get value of the property 'returnTrue': object is null or undefined
Please Tel me whats wrong here?
In FamilyService.js
angular.module('app').factory('ABC', FamilyService);
you are creating a factory for the existing module app, but if the module doesn't exist you need to write
angular.module('app',[]).factory('ABC', FamilyService);
In your case just create a new file, where the angular module gets created
angular.module('app',[]);
UPDATE
Just include the dependencies of your module in the html
<script src="lib/angular-sanititze/angular-sanitize.js"></script>
If you want to mock these modules, you can do something like
beforeEach(function() {
angular.module('second',[]);
}
But in the case that you are using some methods of the third party library, you need to mock these methods as well.
I am new to Angular. I have been trying to load Google Maps, but it's still failing to work. I found a link on the web and followed all of the steps they used, but it still fails to load. I also tried other samples found on the net, but it still fails. Here is the link to the document I followed:
http://www.saintsatplay.com/blog/2015/03/using-google-maps-in-angular-js#.VmLTBaeIZCU
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<style>
.angular-google-map-container {
height: 300px; // Or whatever pixel value you require :)
}
</style>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="http://js.pusher.com/2.2/pusher.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="scripts/lodash.min.js"></script>
<script type="text/javascript" src="scripts/controllers/Drivermap_controllers.js"></script>
</head>
<body ng-app='driverapp'>
<div ng-view>
</div>
</body>
</html>
Drivermap_controllers.js
"use strict";
var app = angular.module('driverapp', ['uiGmapgoogle-maps'])
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '***********',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
})
.controller("DrivermapController", function($scope, uiGmapGoogleMapApi) {
// Define variables for our Map object
var areaLat = 44.2126995,
areaLng = -100.2471641,
areaZoom = 3;
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: areaLat, longitude: areaLng }, zoom: areaZoom };
$scope.options = { scrollwheel: false };
});
});
main.js:
var app = angular.module('driverapp', ['ngRoute','ngResource']);
app.config(function($routeProvider){
$routeProvider
.when('/customers', {
templateUrl: 'views/customers/new.html',
controller: 'CustomersListController'
})
.when('/drivermap', {
templateUrl: 'views/drivermap/new.html',
controller: 'DrivermapController'
})
.otherwise({
redirectTo: '/customers'
});
});
views/drivermap/new.html:
<div ng-controller="DrivermapController">
<ui-gmap-google-map center="map.center" options="options" zoom="map.zoom"></ui-gmap-google-map>
</div>
error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=driverapp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3DuiGmapgoogle-maps%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%252Fnomod%253Fp0%253DuiGmapgoogle-maps%250AG%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A24%253A186%250Ab%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A251%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A117%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A134%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Aeb%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A41%253A249%250Ayc%252Fc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A463%250Ayc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A294%253A192%250An.Callbacks%252Fj%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A26920%250An.Callbacks%252Fk.fireWith%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A27738%250A.ready%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29530%250AI%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29721%250A%0AG%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A6%3A416%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A391%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A134%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Aeb%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A41%3A249%0Ayc%2Fc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A463%0Ayc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A294%3A192%0An.Callbacks%2Fj%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A26920%0An.Callbacks%2Fk.fireWith%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A27738%0A.ready%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29530%0AI%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29721%0A
I suspect (in your comment you did not provided the complete console error) you are using version 2.2.X of angular-google-maps, this version has an additional dependency on angular-simple-logger. The solution would be to explicitly add reference to angular-simple-logger, modify index.html file:
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
Plunker
I am learning AngularJS following the code samples in ng-book.
I have the following folder structure under the app root folder
../css
../img
../lib
../lib/angular
../js
../partials
I have angular 1.2.11 installed in the lib/angular directory (yes I know this is not the latest version..)
The following code works fine in Firefox (41.0.1) but in Chrome (45.0.2454.101 m), Edge and IE (11.0.22) I get an error message
"Argument 'MyController' is not a function, got undefined"
Code follows:
index.html in root folder:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div>
{{1+1}}
</div>
<div ng-controller="MyController">
{{name}}<br/> {{clock}}
</div>
<script src="lib/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
in app.js in the js folder:
function MyController($scope) {
$scope.name = "in sub";
$scope.clock = new Date();
console.log = "Active";
var updateClock = function () {
$scope.clock = new Date();
};
setInterval(function () {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
If I put the app.js into the root folder it still does not work so it is not path related.
If I put the code into an inline script then it works so I don't think it is an issue with the code. Why does this work in one browser but not the others. For reference i am calling this directly from the file browser, not via http.
file:///C:/Users/aaron_000/Desktop/Programming/Angular/app/index.html
If I upgrade to a later version of angular does the problem go away?
I know that this is not the 'proper' way to construct an Angular app, but I am taking it one component at a time :)
Look js/app.js is right. Works fine for me.
var app = angular.module("App", []);
app.controller('AppController', function MyController($scope) {
$scope.name = "in sub";
$scope.clock = new Date();
console.log = "Active";
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<!doctype html>
<html lang="en" ng-app="App">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
</head>
<body>
<div>
{{1+1}}
</div>
<div ng-controller="AppController">
{{name}}
<br/>{{clock}}
</div>
</body>
</html>