ngMaterial flex layout not functioning properly

I can't seem to figure out why ngMaterial is not laying out my simple hello world app in a row. Despite checking the console for errors, I still can't see what I am doing wrong. I expected the content below to be displayed horizontally instead of vertically.

<!DOCTYPE html>
<html>
  <head>
      <!-- AngularJS-ngMaterial-->
      <link src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.css' />
      <link src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.layouts.css' />
      <!-- /AngularJS-ngMaterial-->
  
  </head>
  <body ng-app='myApp' layout='column'>
      <md-toolbar>
        <h1>Angular Material - Starter</h1>
      </md-toolbar>
      
      <div layout='row'>
        <div flex>
          blag
        </div>
        <div flex>
          blah
        </div>
      </div>
  
      <!-- AngularJS-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js'></script>
      <!-- /AngularJS-->
  
      <!-- AngularJS-ngAria-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-aria.js'></script>
      <!-- /AngularJS-ngAria-->
  
      <!-- AngularJS-ngAnimate-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.js'></script>
      <!-- /AngularJS-ngAnimate-->
  
      <!-- AngularJS-ngMaterial-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.js'></script>
      <!-- /AngularJS-ngMaterial-->
  
      <script type='text/javascript'>
          angular.module('myApp', ['ngMaterial']);
      </script>
  </body>
</html>

javascriptangularjsflexbox

Answer №1

Upon running the console in the debug window, an error message appears: 

Uncaught ReferenceError: angular is not defined

This indicates there may be a problem with the imported files.

I have extracted the angular.module statement into an external app.js file (although not necessary) and also updated the CSS link to one from Angular's website. Below is a functioning example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-app='myApp' layout='column'>
  <md-toolbar>
    <h1>Angular Material - Starter</h1>
  </md-toolbar>

  <div layout='row'>
    <div flex>
      blag
    </div>
    <div flex>
      blah
    </div>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="app.js"></script>

</html>

The CDNs used can be found at: https://github.com/angular/material#cdn

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to determine if a chosen date and time are prior or subsequent to the current date and time in an AngularJS environment?

When using a datepicker and timepicker, I have obtained a selected date and time. Now, I need to determine if this selected date and time is before or after the current date and time. For example, if the selected date is "Sat Dec 12 2015" and the selected ...

javascriptjqueryangularjsdate

Showing an array in angular.js

When sending data to a PHP file, the file processes it and performs an SQL search, returning a list of names in a for each statement. For example: Ryan, Jack, Billy, Sarah. However, when echoing the response in Angular, all the names are joined together l ...

javascriptphpangularjssorting

Utilizing AJAX requests to execute create, update, and delete actions all from one streamlined file instead of separating them into three distinct

In my JavaScript code, I am currently making XMLHttpRequests to separate PHP files for different functionalities in my app - like add.php, update.php, and delete.php. However, having three separate files feels repetitive. Is there a way to consolidate al ...

javascriptphpajax

What is the best way to style MUI's Button component with a link to appear like a standard button?

I have a Button that allows users to download a file with a specific filename. Here is the code I used: <Button color='primary' href=`/apiproxy/objects/${id}/subobjects` LinkComponent={React.forwardRef((props, ref) => <Link {...pro ...

javascriptreactjsmaterial-ui

Explain the operation of recursive function calls in JavaScript

I’ve been working on converting the algorithm found in this Python code snippet into JavaScript. function divide(arr, depth, m) { if (complements.length <= depth) { complements.push(2 ** (depth + 2) + 1); } var complement = comple ...

javascriptpythonrecursion

Troubleshooting ng-class functionality in AngularJS

I am attempting to utilize AngularJS in order to change the class name of a div element. Despite following the guidance provided in this answer, I am encountering difficulties as the class name is not updating in my view. Below is the code from my view: ...

javascriptjqueryhtmlangularjsangularjs-scope

What are the steps to setting up SystemJS with Auth0?

I am having trouble configuring SystemJS for Auth0 (angular2-jwt) and Angular 2.0.0-beta.6 as I keep encountering the following error message: GET http://localhost:3000/angular2/http 404 (Not Found)fetchTextFromURL @ system.src.js:1068(anonymous function) ...

javascriptnpmangularsystemjs

Resolving issues with jQuery input values

I have been working on a form that allows users to choose an amount or specify another amount. When the user clicks on "other amount," it changes the displayed amount to $5. My goal is to make it so that when the user specifies an amount other than 5, it u ...

javascriptjqueryangularjs

What is the easiest way to choose a child vertex with just one click on mxgraph?

I have nested vertices and I'm looking to directly select the child vertex with just one click. Currently, when I click on a child vertex, it first selects the parent vertex instead. It's selecting the parent vertex initially: To select the ch ...

javascriptangulartypescriptmxgraph

Determining when the clear button is clicked in a v-select (vue-select) detection strategy

While working on creating a drop-down using v-select, I encountered an issue. After selecting an option, I needed to clear the drop-down and revert the option array back to its initial stage upon clicking the clear button. I attempted various methods such ...

javascriptvue.jsdropdownv-selectvue-select

Transforming the navigation menu using CSS, HTML, and jQuery

One challenge I am facing involves creating a menu similar to the one on http://edition.cnn.com/. I want the clicked button in the menu to receive focus, while the others lose it. Despite trying various methods, I have not been successful. Can someone off ...

javascriptjqueryhtmlcss

Obtain the vector for the right hand using three.js

I am looking to obtain the forward vector of an Object3D in Three.JS var forward = new THREE.Vector3(); object.getWorldDirection(forward); Is there a way to retrieve the right-hand side vector of the object within Three.JS framework? ...

javascriptthree.js

Changing the CSS property of a single table cell's innerHTML

I have a question that may seem silly, but I'm going to ask it anyway. Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so: for (i = 0; i < list ...

javascripthtmlcss

Accessing the data from an HTML5 slider using JQuery

Having some difficulty fetching a value from an HTML5 slider using JQuery. Here is my code snippet: JQuery Code: // Getting the value from slider one $("#submit").on("click", function(evt) { var sliderValue = $('#slider01').attr('value ...

javascriptjqueryhtml

The "click" event is only effective for a single use

I am looking for a way to trigger the click event more than once in my project. I attempted using "live" but it didn't work as expected. There are 2 other similar scripts in this Django project. If you have any suggestions on improving this project, p ...

javascriptjqueryhtmldjango

Tips for invoking a JavaScript function within an iframe

I'm looking to add an iframe to my HTML document, but I also need to pass a variable from a JavaScript function that is located on the same page (which retrieves cookie values). <script type=text/JavaScript> var generateLinkerUrl = function(url ...

javascriptiframe

Fetching data in React using AJAX

I am in the process of developing a React Component that will display data retrieved from an AJAX call. Here's my scenario - I have a Jinja Flask back end hosted on AWS API Gateway, which requires custom headers and the Authorization header to serve H ...

javascriptreactjsflaskiframejinja2

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

javascripthtmlcsscss-animations

Error Encountered When Using SQLite Ionic Plugin

For my Ionic application, I am in the process of creating a database test using information from the original documentation found here. However, upon creating and running the app, I encountered the following error on the terminal: **Uncaught TypeError: Ca ...

angularjssqlitecordovaionic-frameworkandroid-sqlite

Problem encountered when running "npm install" following the configuration of an AngularJS project using Yeoman

Encountering an issue during or after the creation of an Angular project using the command: yo angular While installing devDependencies from the package.json ("npm install" which is triggered by yo angular), I noticed certain modules were missing in the ...

node.jsangularjsgruntjsnpmyeoman