Could someone help me on this. I am trying to use Angular Material with requirejs. But its not working. Here is the code I used:
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="bower_components/angular-material/angular-material.css" rel="stylesheet" />
</head>
<body ng-app="StarterApp" ng-controller="AppCtrl">
<md-select placeholder="Pick" ng-model="someVal">
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
</body>
<script data-main="main" src="require.js"></script>
</html>
main.js
require.config({
baseUrl: "",
paths: {
'app': 'app',
'angular': 'bower_components/angular/angular',
'ngAnimate': 'bower_components/angular-animate/angular-animate.min',
'ngAria': 'bower_components/angular-aria/angular-aria.min',
'ngMaterial': 'bower_components/angular-material/angular-material.min'
},
shim: {
'ngAnimate': ['angular'],
'ngAria': ['angular'],
'ngMaterial': {
deps: ['ngAnimate', 'ngAria']
}
},
deps: ['app']
});
app.js
"use strict";
define(['angular', 'ngMaterial'], function () {
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', function ($scope) {
}]);
});
A similar question was already asked here, and I followed by using hammerjs proxy but I am still getting the same error. :(
Click Here To See The Error Screenshot
I found the answer at the link.
Changes in index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="bower_components/angular-material/angular-material.css" rel="stylesheet" />
</head>
<body ng-controller="AppCtrl">
<md-select placeholder="Pick" ng-model="someVal">
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
</body>
<script data-main="main" src="require.js"></script>
</html>
Changes in app.js
"use strict";
define(['angular', 'ngMaterial'], function () {
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', function ($scope) {
}]);
angular.bootstrap(document.getElementsByTagName("body")[0], ['StarterApp']);
return app;
});
Related
My code:
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="js/components/appComponent.js"></script>
</head>
<body>
<foo callback="$ctrl.myCallback()"></foo>
</body>
</html>
appComponent.js
(function(){
'use strict';
var app = angular.module('myApp',[]);
app.component('foo', {
bindings: {
callback: '&'
},
templateUrl: '/js/components/appComponent.html',
controller: function () {
this.callback=function(){
console.log('Hello!');
}
}
});
})();
appComponent.html
<div ng-click="$ctrl.myCallback()">
Press me!
</div>
Why ng-click does not trigger $ctrl.callback()? Moreover, what callback="$ctrl.myCallback()" is supposed to do? I am afraid I have misunderstood its concept.
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.
simple angular ui example not working. There are no errors in console.
Here is the example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<script>
window.onload = function ()
{
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('MainCtrl', function ($scope) {
});
myApp.config(function ($stateProvider, $urlRouterProvider) {
// default route
$urlRouterProvider.otherwise("/first");
// ui router states
$stateProvider
.state('first', {
url: "/first",
views: {
header: {
template: '<h1>First header</h1>',
controller: function ($scope) {
}
},
content: {
template: '<p>First content</>',
controller: function ($scope) {
}
},
footer: {
template: '<div>First footer</div>',
controller: function ($scope) {
}
}
}
});
});
}
</script>
<body ng-controller="MainCtrl">
<ul>
<li>First</li>
<li>Second</li>
</ul>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- Bootstrap core JavaScript + Angular Js
================================================== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
</body>
</html>
I have included all the resources using external cdn. The template content written in angular is not displayed. I am I doing it correctly?
Here is the plunker: Plunker
You have not mentioned app name anywhere in the view.
<html lang="en" ng-app="myApp">
Here is the working Plunker
Remove window.onload. Make sure the angular and ui-router scripts are loaded before your script. And add the missing ng-app="myApp" to the html element.
Plunkr: http://plnkr.co/edit/XaR3KD2hJ1jOVZ2mWi5H?p=preview
I'm trying to pull some data out of url to pass into a controller for use in the controller. I've been trying to do it via Angular Routing.
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
$routeParams in the controller is always null. Why?
Secondly, the url of the page that this is used on will be something like this: http://www.blah.com/angularroute/edit/32432 Is this an appropriate use of Angular routing?
Hi it looks like you miss reference to angular-route.js script please see example here: http://plnkr.co/edit/RZxt3t9dNQxbyW94V9jQ?p=preview
JS:
var app = angular.module('app', ['ngRoute']);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController',
templateUrl: 'http://run.plnkr.co/d8ZBAv3VEkfIJI4h/search.html'
});
$locationProvider.html5Mode(true);
});
app.controller('firstCtrl', function($scope) {
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
console.log($routeParams);
$scope.SearchText = $routeParams.sometext;
}
html:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl">
Search for elephant<br/>
Search for horse<br/>
Search for tigger<br/>
</div>
<div ng-view="">
</div>
</body>
</html>
Had the same problem with AngularJS 1.3.0, updating to 1.3.13 fixed it.
I'm trying to use ngInclude to load an header template which is common to all my views. Problem is I'm using RequireJS to lazy load my app.
So my code looks like:
index.html
<!doctype html>
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="testApp">
<header ng-include="views/common/header/header.html"></header>
<div class="container" ng-view></div>
<script src="bower_components/requirejs/require.js" data-main="scripts/bootstrap.js"></script>
</body>
</html>
bootstrap.js
require.config({
paths: {
angular: '../../bower_components/angular/angular',
angularRoute: '../../bower_components/angular-route/angular-route',
angularCookies: '../../bower_components/angular-cookies/angular-cookies',
angularMocks: '../../bower_components/angular-mocks/angular-mocks',
text: '../../bower_components/requirejs-text/text'
},
shim: {
'angular' : {'exports' : 'angular'},
'angularRoute': ['angular'],
'angularCookies': ['angular'],
'angularMocks': {
deps:['angular'],
'exports':'angular.mock'
}
},
priority: [
'angular'
]
});
//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';
require([
'angular',
'app',
'angularRoute',
'angularCookies'
], function(angular, app, ngRoutes, ngCookies) {
'use strict';
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function() {
angular.resumeBootstrap([app['name']]);
});
});
app.js
/* global controllers:false */
define([
'angular',
'controllers/main',
'common/header/HeaderModule'
], function (angular, MainCtrl, HeaderModule) {
'use strict';
return angular.module('testApp', [
'testApp.controllers.MainCtrl',
'testApp.Header',
/*angJSDeps*/
'ngCookies',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
});
HeaderModule.js
define([
'angular',
'common/menu/menuItems'
], function (angular, MenuItemsController) {
'use strict';
angular.module('testApp.Header', [])
.controller('MenuItemsController', MenuItemsController);
});
menuItems.js
define(['angular'], function (angular) {
'use strict';
angular.module('testApp.menu.controllers.MenuItemsController', [])
.controller('MenuItemsController', function ($scope) {
$scope.items = [
'Menu1',
'Menu2'
];
});
});
header.html
<nav ng-controller="MenuItemsController">
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
</nav>
This gives no error but also doesn't show the header view - I'm guessing due to the the template not being loaded. Any idea on what I'm missing here?
Thanks
As it turns out I just forgot to wrap the path with single quotes...
<header ng-include="'views/common/header/header.html'"></header>